Remove quotes around codetags curriculum/challenges/arabic (#35843)

curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.arabic.md

@@ -7,7 +7,7 @@ localeTitle: تعلم كيف بيجر المنحنيات العمل
 ---
 
 ## Description
-<section id="description"> قدم التحدي الأخير خاصية عرض <code>animation-timing-function</code> وبعض الكلمات الرئيسية التي تغير سرعة الرسوم المتحركة على مدار مدتها. تقدم CSS خيارًا بخلاف الكلمات الرئيسية التي توفر تحكمًا أكثر دقة في كيفية تشغيل الرسم المتحرك ، من خلال استخدام منحنيات Bezier. في الرسوم المتحركة CSS ، يتم استخدام منحنيات Bezier مع وظيفة <code>cubic-bezier</code> . شكل المنحنى يمثل كيفية تشغيل الرسوم المتحركة. يعيش المنحنى على نظام إحداثي 1 في 1. المحور السيني لنظام الإحداثيات هذا هو مدة الرسم المتحرك (فكر فيه كمقياس زمني) ، والمحور الصادي هو التغيير في الرسوم المتحركة. تتكون الدالة <code>cubic-bezier</code> من أربع نقاط رئيسية على هذه الشبكة 1: 1: <code>p0</code> ، <code>p1</code> ، <code>p2</code> ، <code>p3</code> . يتم تعيين <code>p0</code> و <code>p3</code> لك - وهما نقطة البداية والنهاية التي تقع دائما على التوالي في الأصل (0 ، 0) و (1 ، 1). يمكنك تعيين قيم x و y للنقطتين الأخريين ، وحيث تضعها في الشبكة تملي شكل المنحنى الذي سيتبعه الرسم المتحرك. يتم ذلك في CSS عن طريق تعريف قيمتي x و y لنقاط &quot; <code>p1</code> و <code>p2</code> في النموذج: <code>(x1, y1, x2, y2)</code> . سحب كل ذلك معا ، وهنا مثال لمنحنى بيزير في رمز CSS: <code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code> في المثال أعلاه ، تكون قيم x و y مكافئة لكل نقطة (x1 = 0.25 = y1 و x2 = 0.75 = y2) ، والتي إذا تذكرت من فئة الهندسة ، ينتج عنها خط يمتد من الأصل إلى النقطة (1) ، 1). هذا الرسم المتحرك هو تغيير خطي لعنصر خلال طول الرسم المتحرك ، وهو مماثل لاستخدام الكلمة الرئيسية <code>linear</code> . وبعبارة أخرى ، يتغير بسرعة ثابتة. </section>
+<section id="description"> قدم التحدي الأخير خاصية عرض <code>animation-timing-function</code> وبعض الكلمات الرئيسية التي تغير سرعة الرسوم المتحركة على مدار مدتها. تقدم CSS خيارًا بخلاف الكلمات الرئيسية التي توفر تحكمًا أكثر دقة في كيفية تشغيل الرسم المتحرك ، من خلال استخدام منحنيات Bezier. في الرسوم المتحركة CSS ، يتم استخدام منحنيات Bezier مع وظيفة <code>cubic-bezier</code> . شكل المنحنى يمثل كيفية تشغيل الرسوم المتحركة. يعيش المنحنى على نظام إحداثي 1 في 1. المحور السيني لنظام الإحداثيات هذا هو مدة الرسم المتحرك (فكر فيه كمقياس زمني) ، والمحور الصادي هو التغيير في الرسوم المتحركة. تتكون الدالة <code>cubic-bezier</code> من أربع نقاط رئيسية على هذه الشبكة 1: 1: <code>p0</code> ، <code>p1</code> ، <code>p2</code> ، <code>p3</code> . يتم تعيين <code>p0</code> و <code>p3</code> لك - وهما نقطة البداية والنهاية التي تقع دائما على التوالي في الأصل (0 ، 0) و (1 ، 1). يمكنك تعيين قيم x و y للنقطتين الأخريين ، وحيث تضعها في الشبكة تملي شكل المنحنى الذي سيتبعه الرسم المتحرك. يتم ذلك في CSS عن طريق تعريف قيمتي x و y لنقاط  <code>p1</code> و <code>p2</code> في النموذج: <code>(x1, y1, x2, y2)</code> . سحب كل ذلك معا ، وهنا مثال لمنحنى بيزير في رمز CSS: <code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code> في المثال أعلاه ، تكون قيم x و y مكافئة لكل نقطة (x1 = 0.25 = y1 و x2 = 0.75 = y2) ، والتي إذا تذكرت من فئة الهندسة ، ينتج عنها خط يمتد من الأصل إلى النقطة (1) ، 1). هذا الرسم المتحرك هو تغيير خطي لعنصر خلال طول الرسم المتحرك ، وهو مماثل لاستخدام الكلمة الرئيسية <code>linear</code> . وبعبارة أخرى ، يتغير بسرعة ثابتة. </section>
 
 ## Instructions
 <section id="instructions"> بالنسبة للعنصر الذي له معرف <code>ball1</code> ، قم بتغيير قيمة خاصية <code>animation-timing-function</code> من <code>linear</code> إلى قيمة الدالة المكافئة <code>cubic-bezier</code> المكافئة لها. استخدم قيم النقاط الواردة في المثال أعلاه. </section>

curriculum/challenges/arabic/01-responsive-web-design/basic-css/set-the-id-of-an-element.arabic.md

@@ -10,7 +10,7 @@ localeTitle: عيّن معرف عنصر
 <section id="description"> بالإضافة إلى الفصول الدراسية ، يمكن أن يحتوي كل عنصر HTML أيضًا على سمة <code>id</code> . هناك العديد من المزايا لاستخدام سمات <code>id</code> : يمكنك استخدام <code>id</code> لوضع نمط لعنصر واحد ، وبعد ذلك ستعرف أنه يمكنك استخدامها لتحديد عناصر محددة وتعديلها باستخدام جافا سكريبت. يجب أن تكون سمات <code>id</code> فريدة. لن تقوم المتصفحات بفرض هذا ، ولكنها أفضل الممارسات المتفق عليها على نطاق واسع. لذا يرجى عدم إعطاء أكثر من عنصر واحد نفس سمة <code>id</code> . في ما يلي مثال على كيفية إعطاء عنصر <code>h2</code> معرف تطبيق <code>cat-photo-app</code> : <code>&lt;h2 id=&quot;cat-photo-app&quot;&gt;</code> </section>
 
 ## Instructions
-<section id="instructions"> امنح <code>form</code> الخاص بك <code>form</code> &quot; <code>cat-photo-form</code> . </section>
+<section id="instructions"> امنح <code>form</code> الخاص بك <code>form</code>  <code>cat-photo-form</code> . </section>
 
 ## Tests
 <section id='tests'>

curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.arabic.md

@@ -7,7 +7,7 @@ localeTitle: قم بتعريف Doctype من مستند HTML
 ---
 
 ## Description
-<section id="description"> تغطي التحديات حتى الآن عناصر HTML محددة واستخداماتها. ومع ذلك ، هناك بعض العناصر التي تعطي الهيكل العام لصفحتك ، ويجب تضمينها في كل مستند HTML. في الجزء العلوي من المستند ، تحتاج إلى إخبار المتصفح بإصدار HTML الذي تستخدمه صفحتك. HTML هي لغة متطورة ، ويتم تحديثها بانتظام. تدعم معظم المتصفحات الرئيسية أحدث المواصفات ، وهي HTML5. ومع ذلك ، قد تستخدم صفحات الويب القديمة الإصدارات السابقة من اللغة. أنت تخبر المتصفح بهذه المعلومات عن طريق إضافة العلامة <code>&lt;!DOCTYPE ...&gt;</code> على السطر الأول ، حيث يكون الجزء &quot; <code>...</code> &quot; هو إصدار HTML. بالنسبة إلى HTML5 ، تستخدم <code>&lt;!DOCTYPE html&gt;</code> . <code>!</code> و <code>DOCTYPE</code> الكبيرة مهمة ، خاصة بالنسبة للمتصفحات القديمة. ليست <code>html</code> حساسة لحالة الأحرف. بعد ذلك ، يجب أن يتم لف بقية تعليمات HTML البرمجية الخاصة بك في علامات <code>html</code> . ينتقل الافتتاح <code>&lt;html&gt;</code> مباشرة أسفل السطر <code>&lt;!DOCTYPE html&gt;</code> ، ويذهب الإغلاق <code>&lt;/html&gt;</code> في نهاية الصفحة. في ما يلي مثال على بنية الصفحة: <blockquote style=";text-align:right;direction:rtl"> &lt;! DOCTYPE html&gt; <br> &lt;HTML&gt; <br> &lt;! - رمز HTML الخاص بك هنا -&gt; <br> &lt;/ HTML&gt; </blockquote></section>
+<section id="description"> تغطي التحديات حتى الآن عناصر HTML محددة واستخداماتها. ومع ذلك ، هناك بعض العناصر التي تعطي الهيكل العام لصفحتك ، ويجب تضمينها في كل مستند HTML. في الجزء العلوي من المستند ، تحتاج إلى إخبار المتصفح بإصدار HTML الذي تستخدمه صفحتك. HTML هي لغة متطورة ، ويتم تحديثها بانتظام. تدعم معظم المتصفحات الرئيسية أحدث المواصفات ، وهي HTML5. ومع ذلك ، قد تستخدم صفحات الويب القديمة الإصدارات السابقة من اللغة. أنت تخبر المتصفح بهذه المعلومات عن طريق إضافة العلامة <code>&lt;!DOCTYPE ...&gt;</code> على السطر الأول ، حيث يكون الجزء  <code>...</code> هو إصدار HTML. بالنسبة إلى HTML5 ، تستخدم <code>&lt;!DOCTYPE html&gt;</code> . <code>!</code> و <code>DOCTYPE</code> الكبيرة مهمة ، خاصة بالنسبة للمتصفحات القديمة. ليست <code>html</code> حساسة لحالة الأحرف. بعد ذلك ، يجب أن يتم لف بقية تعليمات HTML البرمجية الخاصة بك في علامات <code>html</code> . ينتقل الافتتاح <code>&lt;html&gt;</code> مباشرة أسفل السطر <code>&lt;!DOCTYPE html&gt;</code> ، ويذهب الإغلاق <code>&lt;/html&gt;</code> في نهاية الصفحة. في ما يلي مثال على بنية الصفحة: <blockquote style=";text-align:right;direction:rtl"> &lt;! DOCTYPE html&gt; <br> &lt;HTML&gt; <br> &lt;! - رمز HTML الخاص بك هنا -&gt; <br> &lt;/ HTML&gt; </blockquote></section>
 
 ## Instructions
 <section id="instructions"> أضف علامة <code>DOCTYPE</code> لـ HTML5 إلى أعلى مستند HTML الفارغ في محرر الشفرة. تحته ، إضافة علامات <code>html</code> فتح وإغلاق ، والتي التفاف حول عنصر <code>h1</code> . يمكن أن يتضمن العنوان أي نص. </section>

curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-prototype-chain.arabic.md

@@ -17,7 +17,7 @@ localeTitle: فهم سلسلة النموذج
 
 ```yml
 tests:
-  - text: يجب أن تُظهر الكود الخاص بك أن <code>Object.prototype</code> هو النموذج الأولي لـ <code>Dog.prototype</code> &quot;)
+  - text: يجب أن تُظهر الكود الخاص بك أن <code>Object.prototype</code> هو النموذج الأولي لـ <code>Dog.prototype</code>)
     testString: 'assert(/Object\.prototype\.isPrototypeOf/.test(code), "Your code should show that <code>Object.prototype</code> is the prototype of <code>Dog.prototype</code>");'
 
 ```

curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself.arabic.md

@@ -7,7 +7,7 @@ localeTitle: استخدام الوراثة حتى لا تكرر نفسك
 ---
 
 ## Description
-<section id="description"> هناك مبدأ في البرمجة يسمى &quot; <code>Don&#39;t Repeat Yourself (DRY)</code> . السبب في تكرار التعليمات البرمجية هو مشكلة لأن أي تغيير يتطلب إصلاح الكود في أماكن متعددة. هذا عادة ما يعني المزيد من العمل للمبرمجين ومجالاً أكبر للأخطاء. لاحظ في المثال أدناه أن طريقة <code>describe</code> تتم مشاركتها بواسطة <code>Bird</code> and <code>Dog</code> : <blockquote style=";text-align:right;direction:rtl"> Bird.prototype = { <br> منشئ: الطيور ، <br> وصف: الوظيفة () { <br> console.log (&quot;اسمي هو&quot; + this.name)؛ <br> } <br> }؛ <br><br> Dog.prototype = { <br> منشئ: كلب ، <br> وصف: الوظيفة () { <br> console.log (&quot;اسمي هو&quot; + this.name)؛ <br> } <br> }؛ </blockquote> تكرر طريقة <code>describe</code> في مكانين. يمكن تحرير الرمز ليتبع مبدأ <code>DRY</code> عن طريق إنشاء نوع <code>supertype</code> (أو الأصل) يسمى <code>Animal</code> : <blockquote style=";text-align:right;direction:rtl"> وظيفة الحيوان () {}؛ <br><br> Animal.prototype = { <br> منشئ: الحيوان ، <br> وصف: الوظيفة () { <br> console.log (&quot;اسمي هو&quot; + this.name)؛ <br> } <br> }؛ </blockquote> بما أن <code>Animal</code> يشتمل على طريقة <code>describe</code> ، فيمكنك إزالتها من <code>Bird</code> and <code>Dog</code> : <blockquote style=";text-align:right;direction:rtl"> Bird.prototype = { <br> منشئ: الطيور <br> }؛ <br><br> Dog.prototype = { <br> منشئ: كلب <br> }؛ </blockquote></section>
+<section id="description"> هناك مبدأ في البرمجة يسمى <code>Don&#39;t Repeat Yourself (DRY)</code> . السبب في تكرار التعليمات البرمجية هو مشكلة لأن أي تغيير يتطلب إصلاح الكود في أماكن متعددة. هذا عادة ما يعني المزيد من العمل للمبرمجين ومجالاً أكبر للأخطاء. لاحظ في المثال أدناه أن طريقة <code>describe</code> تتم مشاركتها بواسطة <code>Bird</code> and <code>Dog</code> : <blockquote style=";text-align:right;direction:rtl"> Bird.prototype = { <br> منشئ: الطيور ، <br> وصف: الوظيفة () { <br> console.log (&quot;اسمي هو&quot; + this.name)؛ <br> } <br> }؛ <br><br> Dog.prototype = { <br> منشئ: كلب ، <br> وصف: الوظيفة () { <br> console.log (&quot;اسمي هو&quot; + this.name)؛ <br> } <br> }؛ </blockquote> تكرر طريقة <code>describe</code> في مكانين. يمكن تحرير الرمز ليتبع مبدأ <code>DRY</code> عن طريق إنشاء نوع <code>supertype</code> (أو الأصل) يسمى <code>Animal</code> : <blockquote style=";text-align:right;direction:rtl"> وظيفة الحيوان () {}؛ <br><br> Animal.prototype = { <br> منشئ: الحيوان ، <br> وصف: الوظيفة () { <br> console.log (&quot;اسمي هو&quot; + this.name)؛ <br> } <br> }؛ </blockquote> بما أن <code>Animal</code> يشتمل على طريقة <code>describe</code> ، فيمكنك إزالتها من <code>Bird</code> and <code>Dog</code> : <blockquote style=";text-align:right;direction:rtl"> Bird.prototype = { <br> منشئ: الطيور <br> }؛ <br><br> Dog.prototype = { <br> منشئ: كلب <br> }؛ </blockquote></section>
 
 ## Instructions
 <section id="instructions"> تتكرر طريقة <code>eat</code> في كل من <code>Cat</code> and <code>Bear</code> . قم بتحرير الكود بروح <code>DRY</code> بتحريك طريقة <code>eat</code> إلى نوع <code>supertype</code> <code>Animal</code> . </section>

curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-one-or-more-criminals-in-a-hunt.arabic.md

@@ -17,20 +17,20 @@ localeTitle: العثور على واحد أو أكثر من المجرمين ف
 
 ```yml
 tests:
-  - text: يجب أن يتطابق تعبيرك العادي مع <code>one</code> المجرمين (&quot; <code>C</code> &quot;) في <code>&quot;C&quot;</code>
+  - text: يجب أن يتطابق تعبيرك العادي مع <code>one</code> المجرمين ( <code>C</code>) في <code>&quot;C&quot;</code>
-    testString: 'assert("C".match(reCriminals) && "C".match(reCriminals)[0] == "C", "Your regex should match <code>one</code> criminal ("<code>C</code>") in <code>"C"</code>");'
+    testString: 'assert("C".match(reCriminals) && "C".match(reCriminals)[0] == "C", "Your regex should match <code>one</code> criminal (<code>C</code>) in <code>"C"</code>");'
-  - text: يجب أن يتطابق تعبيرك العادي مع <code>two</code> المجرمين (&quot; <code>CC</code> &quot;) في <code>&quot;CC&quot;</code>
+  - text: يجب أن يتطابق تعبيرك العادي مع <code>two</code> المجرمين ( <code>CC</code> ) في <code>&quot;CC&quot;</code>
-    testString: 'assert("CC".match(reCriminals) && "CC".match(reCriminals)[0] == "CC", "Your regex should match <code>two</code> criminals ("<code>CC</code>") in <code>"CC"</code>");'
+    testString: 'assert("CC".match(reCriminals) && "CC".match(reCriminals)[0] == "CC", "Your regex should match <code>two</code> criminals (<code>CC</code>) in <code>"CC"</code>");'
-  - text: يجب أن يتطابق <code>&quot;P1P5P4CCCP2P6P3&quot;</code> العادي مع <code>three</code> مجرمين (&quot; <code>CCC</code> &quot;) في <code>&quot;P1P5P4CCCP2P6P3&quot;</code>
+  - text: يجب أن يتطابق <code>&quot;P1P5P4CCCP2P6P3&quot;</code> العادي مع <code>three</code> مجرمين (<code>CCC</code>) في <code>&quot;P1P5P4CCCP2P6P3&quot;</code>
-    testString: 'assert("P1P5P4CCCP2P6P3".match(reCriminals) && "P1P5P4CCCP2P6P3".match(reCriminals)[0] == "CCC", "Your regex should match <code>three</code> criminals ("<code>CCC</code>") in <code>"P1P5P4CCCP2P6P3"</code>");'
+    testString: 'assert("P1P5P4CCCP2P6P3".match(reCriminals) && "P1P5P4CCCP2P6P3".match(reCriminals)[0] == "CCC", "Your regex should match <code>three</code> criminals (<code>CCC</code>) in <code>"P1P5P4CCCP2P6P3"</code>");'
-  - text: يجب أن يتطابق <code>&quot;P6P2P7P4P5CCCCCP3P1&quot;</code> العادي مع <code>five</code> مجرمين (&quot; <code>CCCCC</code> &quot;) في <code>&quot;P6P2P7P4P5CCCCCP3P1&quot;</code>
+  - text: يجب أن يتطابق <code>&quot;P6P2P7P4P5CCCCCP3P1&quot;</code> العادي مع <code>five</code> مجرمين ( <code>CCCCC</code> ) في <code>&quot;P6P2P7P4P5CCCCCP3P1&quot;</code>
-    testString: 'assert("P6P2P7P4P5CCCCCP3P1".match(reCriminals) && "P6P2P7P4P5CCCCCP3P1".match(reCriminals)[0] == "CCCCC", "Your regex should match <code>five</code> criminals ("<code>CCCCC</code>") in <code>"P6P2P7P4P5CCCCCP3P1"</code>");'
+    testString: 'assert("P6P2P7P4P5CCCCCP3P1".match(reCriminals) && "P6P2P7P4P5CCCCCP3P1".match(reCriminals)[0] == "CCCCC", "Your regex should match <code>five</code> criminals (<code>CCCCC</code>) in <code>"P6P2P7P4P5CCCCCP3P1"</code>");'
   - text: يجب ألا يتطابق تعبيرك العادي مع أي مجرمين في <code>&quot;&quot;</code>
     testString: 'assert(!reCriminals.test(""), "Your regex should not match any criminals in <code>""</code>");'
   - text: يجب ألا يتطابق <code>&quot;P1P2P3&quot;</code> العادي مع أي مجرمين في <code>&quot;P1P2P3&quot;</code>
     testString: 'assert(!reCriminals.test("P1P2P3"), "Your regex should not match any criminals in <code>"P1P2P3"</code>");'
-  - text: يجب أن يتطابق <code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code> العادي مع <code>fifty</code> المجرمين (&quot; <code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code> &quot;) في <code>&quot;P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3&quot;</code> .
+  - text: يجب أن يتطابق <code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code> العادي مع <code>fifty</code> المجرمين ( <code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code> ) في <code>&quot;P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3&quot;</code> .
-    testString: 'assert("P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3".match(reCriminals) && "P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3".match(reCriminals)[0] == "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC", "Your regex should match <code>fifty</code> criminals ("<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>") in <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code>.");'
+    testString: 'assert("P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3".match(reCriminals) && "P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3".match(reCriminals)[0] == "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC", "Your regex should match <code>fifty</code> criminals (<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>) in <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code>.");'
 
 ```
 

curriculum/challenges/arabic/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.arabic.md

@@ -7,7 +7,7 @@ localeTitle: استخدام تصميم متجاوب مع حاويات السوا
 ---
 
 ## Description
-<section id="description"> في قسم HTML5 و CSS من برنامج FreeCodeCamp ، أنشأنا تطبيق صور Cat. الآن دعونا نعود إليها. في هذه المرة ، سنقوم بإعداده باستخدام إطار عمل Bootstrap المتجاوب لـ CSS. سيحدد Bootstrap مدى اتساع الشاشة ويستجيب عن طريق تغيير حجم عناصر HTML - ومن هنا يكون اسم &quot; <code>Responsive Design</code> . مع تصميم متجاوب ، ليست هناك حاجة لتصميم نسخة محمولة من موقع الويب الخاص بك. سوف تبدو جيدة على الأجهزة ذات الشاشات من أي عرض. يمكنك إضافة Bootstrap إلى أي تطبيق بإضافة التعليمة البرمجية التالية إلى أعلى HTML: <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;/&gt;</code> في هذه الحالة ، قمنا بالفعل بإضافته لك إلى هذه الصفحة من وراء الكواليس. لاحظ أن استخدام <code>&gt;</code> أو <code>/&gt;</code> لإغلاق علامة <code>link</code> أمر مقبول. للبدء ، يجب علينا تضمين جميع HTML (باستثناء علامة <code>link</code> وعنصر <code>style</code> ) في عنصر <code>div</code> باستخدام <code>container-fluid</code> للفئة. </section>
+<section id="description"> في قسم HTML5 و CSS من برنامج FreeCodeCamp ، أنشأنا تطبيق صور Cat. الآن دعونا نعود إليها. في هذه المرة ، سنقوم بإعداده باستخدام إطار عمل Bootstrap المتجاوب لـ CSS. سيحدد Bootstrap مدى اتساع الشاشة ويستجيب عن طريق تغيير حجم عناصر HTML - ومن هنا يكون اسم <code>Responsive Design</code> . مع تصميم متجاوب ، ليست هناك حاجة لتصميم نسخة محمولة من موقع الويب الخاص بك. سوف تبدو جيدة على الأجهزة ذات الشاشات من أي عرض. يمكنك إضافة Bootstrap إلى أي تطبيق بإضافة التعليمة البرمجية التالية إلى أعلى HTML: <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;/&gt;</code> في هذه الحالة ، قمنا بالفعل بإضافته لك إلى هذه الصفحة من وراء الكواليس. لاحظ أن استخدام <code>&gt;</code> أو <code>/&gt;</code> لإغلاق علامة <code>link</code> أمر مقبول. للبدء ، يجب علينا تضمين جميع HTML (باستثناء علامة <code>link</code> وعنصر <code>style</code> ) في عنصر <code>div</code> باستخدام <code>container-fluid</code> للفئة. </section>
 
 ## Instructions
 <section id="instructions">

curriculum/challenges/arabic/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.arabic.md

@@ -7,7 +7,7 @@ localeTitle: استخدم شبكة Bootstrap لوضع عناصر جنبًا إل
 ---
 
 ## Description
-<section id="description"> يستخدم Bootstrap نظام شبكة متجاوزة من 12 عمودًا ، مما يجعل من السهل وضع العناصر في صفوف وتحديد العرض النسبي لكل عنصر. يمكن تطبيق معظم طبقات Bootstrap على عنصر <code>div</code> . يحتوي Bootstrap على خصائص عرض العمود المختلفة التي يستخدمها بناءً على مدى اتساع شاشة المستخدم. على سبيل المثال ، تشتمل الهواتف على شاشات ضيقة ، كما تحتوي أجهزة الكمبيوتر المحمولة على شاشات أوسع. خذ على سبيل المثال الطبقة <code>col-md-*</code> في Bootstrap. هنا ، <code>md</code> تعني medium ، و <code>*</code> هو رقم يحدد عدد الأعمدة التي يجب أن يكون العنصر فيها. في هذه الحالة ، يتم تحديد عرض العمود لعنصر على شاشة متوسطة الحجم ، مثل الكمبيوتر المحمول. في تطبيق Cat Photo الذي نقوم ببنائه ، سنستخدم <code>col-xs-*</code> ، حيث <code>xs</code> تعني مساحة صغيرة جدًا (مثل شاشة الهاتف المحمول الصغيرة جدًا) ، و <code>*</code> هو عدد الأعمدة التي تحدد عدد الأعمدة على نطاق واسع يجب أن يكون العنصر. ضع زري &quot; <code>Like</code> و &quot; <code>Info</code> و &quot; <code>Delete</code> جنبًا إلى جنب من خلال تضمين كل ثلاثة منهم في عنصر واحد <code>&lt;div class=&quot;row&quot;&gt;</code> ، ثم كل واحد منهم داخل عنصر <code>&lt;div class=&quot;col-xs-4&quot;&gt;</code> . يتم تطبيق فئة <code>row</code> على <code>div</code> ، ويمكن أن تتداخل الأزرار نفسها داخلها. </section>
+<section id="description"> يستخدم Bootstrap نظام شبكة متجاوزة من 12 عمودًا ، مما يجعل من السهل وضع العناصر في صفوف وتحديد العرض النسبي لكل عنصر. يمكن تطبيق معظم طبقات Bootstrap على عنصر <code>div</code> . يحتوي Bootstrap على خصائص عرض العمود المختلفة التي يستخدمها بناءً على مدى اتساع شاشة المستخدم. على سبيل المثال ، تشتمل الهواتف على شاشات ضيقة ، كما تحتوي أجهزة الكمبيوتر المحمولة على شاشات أوسع. خذ على سبيل المثال الطبقة <code>col-md-*</code> في Bootstrap. هنا ، <code>md</code> تعني medium ، و <code>*</code> هو رقم يحدد عدد الأعمدة التي يجب أن يكون العنصر فيها. في هذه الحالة ، يتم تحديد عرض العمود لعنصر على شاشة متوسطة الحجم ، مثل الكمبيوتر المحمول. في تطبيق Cat Photo الذي نقوم ببنائه ، سنستخدم <code>col-xs-*</code> ، حيث <code>xs</code> تعني مساحة صغيرة جدًا (مثل شاشة الهاتف المحمول الصغيرة جدًا) ، و <code>*</code> هو عدد الأعمدة التي تحدد عدد الأعمدة على نطاق واسع يجب أن يكون العنصر. ضع زري <code>Like</code> و  <code>Info</code> و  <code>Delete</code> جنبًا إلى جنب من خلال تضمين كل ثلاثة منهم في عنصر واحد <code>&lt;div class=&quot;row&quot;&gt;</code> ، ثم كل واحد منهم داخل عنصر <code>&lt;div class=&quot;col-xs-4&quot;&gt;</code> . يتم تطبيق فئة <code>row</code> على <code>div</code> ، ويمكن أن تتداخل الأزرار نفسها داخلها. </section>
 
 ## Instructions
 undefined

curriculum/challenges/arabic/03-front-end-libraries/react-and-redux/manage-state-locally-first.arabic.md

@@ -26,7 +26,7 @@ tests:
     testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const testValue = "__TEST__EVENT__INPUT"; const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); assert(updated.find("input").props().value === testValue, "The <code>input</code> element should render the value of <code>input</code> in local state."); }; '
   - text: يجب استدعاء الأسلوب <code>handleChange</code> تحديث قيمة <code>input</code> في الحالة إلى الإدخال الحالي.
     testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); 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 waitForIt(() => mockedComponent )}; const afterInput = await changed(); assert(initialState.input === "" && afterInput.state().input === "__TEST__EVENT__MESSAGE__", "Calling the method <code>handleChange</code> should update the <code>input</code> value in state to the current input.");  }; '
-  - text: يجب النقر فوق الزر &quot; <code>Add message</code> استدعاء الأسلوب <code>submitMessage</code> الذي يجب إضافة <code>input</code> الحالي إلى صفيف <code>messages</code> في الحالة.
+  - text: يجب النقر فوق الزر  <code>Add message</code> استدعاء الأسلوب <code>submitMessage</code> الذي يجب إضافة <code>input</code> الحالي إلى صفيف <code>messages</code> في الحالة.
     testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); 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 waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit_1 = await firstSubmit(); const submitState_1 = afterSubmit_1.state(); const testMessage_2 = "__SECOND__MESSAGE__"; const secondChange = () => { causeChange(mockedComponent, testMessage_2); return waitForIt(() => mockedComponent )}; const secondResult = await secondChange(); const secondSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit_2 = await 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, "Clicking the <code>Add message</code> button should call the method <code>submitMessage</code> which should add the current <code>input</code> to the <code>messages</code> array in state."); }; '
   - text: يجب أن تقوم طريقة <code>submitMessage</code> بمسح الإدخال الحالي.
     testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); 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 waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstState = firstResult.state(); const firstSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit = await firstSubmit(); const submitState = afterSubmit.state(); assert(firstState.input === testMessage && submitState.input === "", "The <code>submitMessage</code> method should clear the current input."); }; '

curriculum/challenges/arabic/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.arabic.md

@@ -18,7 +18,7 @@ localeTitle: إدارة التحديثات باستخدام أساليب دور
 
 ```yml
 tests:
-  - text: يجب أن يقوم مكون &quot; <code>Controller</code> بعرض مكون &quot; <code>Dialog</code> &quot; كطفل.
+  - text: يجب أن يقوم مكون <code>Controller</code> بعرض مكون  <code>Dialog</code> كطفل.
     testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find("Controller").length === 1 && mockedComponent.find("Dialog").length === 1; })(), "The <code>Controller</code> component should render the <code>Dialog</code> component as a child.");'
   - text: يجب أن يتم تسجيل أسلوب <code>componentWillReceiveProps</code> في مكون <code>Dialog</code> <code>this.props</code> إلى وحدة التحكم.
     testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,""); return lifecycleChild.includes("console.log") && lifecycleChild.includes("this.props") })(), "The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.");'

curriculum/challenges/arabic/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.arabic.md

@@ -11,7 +11,7 @@ localeTitle: تحسين Re-Renders مع shouldComponentUpdate
 <section id="description"> حتى الآن ، إذا تلقى أي مكون <code>state</code> جديدة أو <code>props</code> جديدة ، فإنه يعيد نفسه وجميع أبنائه. هذا عادة ما يرام. لكن React يوفر طريقة دورة حياة يمكنك الاتصال بها عندما تتلقى مكونات <code>state</code> الطفل أو <code>props</code> الجديدة ، وتعلن تحديدًا إذا كان يجب تحديث المكونات أم لا. هذه الطريقة هي <code>shouldComponentUpdate()</code> ، وتستغرق <code>nextProps</code> و <code>nextState</code> كمعلمات. هذه الطريقة هي طريقة مفيدة لتحسين الأداء. على سبيل المثال ، السلوك الافتراضي هو أن المكون الخاص بك re-renders عندما يتلقى <code>props</code> الجديدة ، حتى إذا لم يتم تغيير <code>props</code> . يمكنك استخدام <code>shouldComponentUpdate()</code> لمنع هذا عن طريق مقارنة <code>props</code> . يجب أن تقوم الطريقة بإرجاع قيمة <code>boolean</code> تخبر رد ما إذا كان سيتم تحديث المكون أم لا. يمكنك مقارنة الدعائم الحالية ( <code>this.props</code> ) <code>this.props</code> التالية ( <code>nextProps</code> ) لتحديد ما إذا كنت بحاجة إلى التحديث أم لا ، وإرجاع <code>true</code> أو <code>false</code> وفقًا لذلك. </section>
 
 ## Instructions
-<section id="instructions"> يتم إضافة أسلوب <code>shouldComponentUpdate()</code> في مكون يسمى <code>OnlyEvens</code> . حاليًا ، يعود هذا الأسلوب إلى <code>true</code> لذا تعيد <code>OnlyEvens</code> الظهور في كل مرة تتلقى فيها <code>props</code> الجديدة. قم بتعديل الطريقة بحيث لا يتم تحديث <code>OnlyEvens</code> إلا إذا كانت <code>value</code> الدعائم الجديدة حتى. انقر فوق الزر &quot; <code>Add</code> وشاهد ترتيب الأحداث في وحدة تحكم المستعرض الخاص بك أثناء تشغيل hooks دورة الحياة الأخرى. </section>
+<section id="instructions"> يتم إضافة أسلوب <code>shouldComponentUpdate()</code> في مكون يسمى <code>OnlyEvens</code> . حاليًا ، يعود هذا الأسلوب إلى <code>true</code> لذا تعيد <code>OnlyEvens</code> الظهور في كل مرة تتلقى فيها <code>props</code> الجديدة. قم بتعديل الطريقة بحيث لا يتم تحديث <code>OnlyEvens</code> إلا إذا كانت <code>value</code> الدعائم الجديدة حتى. انقر فوق الزر <code>Add</code> وشاهد ترتيب الأحداث في وحدة تحكم المستعرض الخاص بك أثناء تشغيل hooks دورة الحياة الأخرى. </section>
 
 ## Tests
 <section id='tests'>

curriculum/challenges/arabic/03-front-end-libraries/react/render-with-an-if-else-condition.arabic.md

@@ -22,7 +22,7 @@ tests:
     testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("MyComponent").length === 1; })(), "<code>MyComponent</code> should exist and render.");'
   - text: ''
     testString: '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, "When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render."); }; '
-  - text: عند تعيين <code>display</code> على &quot; <code>false</code> ، يجب أن يتم <code>display</code> فقط <code>button</code> <code>div</code> <code>button</code> .
+  - text: عند تعيين <code>display</code> على <code>false</code> ، يجب أن يتم <code>display</code> فقط <code>button</code> <code>div</code> <code>button</code> .
     testString: '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, "When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render."); }; '
   - text: يجب أن تستخدم طريقة التجسيد عبارة <code>if/else</code> للتحقق من حالة <code>this.state.display</code> .
     testString: 'getUserInput => assert(getUserInput("index").includes("if") && getUserInput("index").includes("else"), "The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.");'

curriculum/challenges/arabic/08-coding-interview-prep/rosetta-code/execute-brain.arabic.md

@@ -20,7 +20,7 @@ tests:
   - text: ''
     testString: 'assert(typeof brain(bye) === "string", "<code>brain(bye)</code> should return a string");'
   - text: ''
-    testString: 'assert.equal(brain("++++++[>++++++++++<-]>+++++."),"A", "<code>brain("++++++[>++++++++++<-]>+++++.")</code should return "A"");'
+    testString: 'assert.equal(brain("++++++[>++++++++++<-]>+++++."),"A", "<code>brain("++++++[>++++++++++<-]>+++++.")</code> should return "A"");'
   - text: ''
     testString: 'assert.equal(brain(bye), "Goodbye, World!\r\n", "<code>brain(bye)</code> should return <code>Goodbye, World!\\r\\n</code>");'
   - text: ''