...
+
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+
+
+
+```
+
+```css
+/* rule 1 */
+.subsection {
+ color: blue;
+}
+
+/* rule 2 */
+.main .list {
+ color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `
` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+
+
+
+```
+
+```css
+/* rule 1 */
+#subsection {
+ color: blue;
+}
+
+/* rule 2 */
+.main .list {
+ color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `
` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+ background-color: yellow;
+ color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+ color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `
` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+ font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+ font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+ font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+ font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+
+
+
+```
+
+```css
+/* styles.css */
+
+#parent {
+ color: red;
+}
+
+.child {
+ color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `
` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+ color: red;
+}
+
+.warning {
+ color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our
JavaScript String Handbook
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World! ";
+
+console.log(greeting);
+```
+
+
Link to Guide
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+
Link to Guide
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+
Link to Guide
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description | Example |
+| -------- | ------------------------ | ------- |
+| == | Equal (value comparison) | x == y |
+| != | Not equal | x != y |
+| > | Greater than | x > y |
+| < | Less than | x < y |
+| >= | Greater than or equal to | x >= y |
+| <= | Less than or equal to | x <= y |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read
this article on JavaScript.info to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+ console.log("x is greater than 3");
+} else {
+ console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+ console.log("x is equal to y");
+} else {
+ console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+ console.log("x is greater than 10");
+} else if (x > 5) {
+ console.log("x is greater than 5");
+} else {
+ console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+ console.log("x is greater than 10");
+} else if (x > 5) {
+ console.log("x is greater than 5");
+} else {
+ console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+ console.log("At least one of the conditions is true");
+} else {
+ console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+ console.log("Both of the conditions are true");
+} else {
+ console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+ console.log("The condition is false");
+} else {
+ console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+ console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+ console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+ console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+ console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+ case "Monday":
+ console.log("Today is Monday");
+ break;
+ case "Tuesday":
+ console.log("Today is Tuesday");
+ break;
+ case "Wednesday":
+ console.log("Today is Wednesday");
+ break;
+ case "Thursday":
+ console.log("Today is Thursday");
+ break;
+ case "Friday":
+ console.log("Today is Friday");
+ break;
+ case "Saturday":
+ console.log("Today is Saturday");
+ break;
+ case "Sunday":
+ console.log("Today is Sunday");
+ break;
+ default:
+ console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+ case "Monday":
+ activity = "Go to the gym";
+ break;
+ case "Tuesday":
+ activity = "Attend coding meetup";
+ break;
+ case "Wednesday":
+ activity = "Watch a movie";
+ break;
+ case "Thursday":
+ activity = "Visit a museum";
+ break;
+ case "Friday":
+ activity = "Dinner with friends";
+ break;
+ case "Saturday":
+ activity = "Hiking in the mountains";
+ break;
+ case "Sunday":
+ activity = "Rest at home";
+ break;
+ default:
+ activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+ return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+ return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+ let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+ console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+ let x = 20;
+ console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+ return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+ return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+ return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+ if(a > 2){
+ return b;
+ }
+
+ return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+ if(b > 11){
+ return b * 2;
+ } else if(a > 3){
+ return b;
+ }
+
+ return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+ return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `
`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`.
+
+A full paragraph element looks like this:
+
+
+
+# --assignment--
+
+Watch Kevin Powell’s
Introduction to HTML video
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or `
![]()
`, but some can also be used without the closing forward slash such as `
` or `
![]()
`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `
` or `
![]()
` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``.
+
+Open the `index.html` file created earlier in your text editor and add `` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so:
+
+```html
+
+
+
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `
`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+
My First Webpage
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag:
+
+
+```html
+
+
+
+
+
+
My First Webpage
+
+
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read
How to Think Like a Programmer - Lessons in Problem Solving by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch
How to Begin Thinking Like a Programmer by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this
Pseudocode: What It Is and How to Write It article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called
throwing an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+ return c;
+}
+
+function print() {
+ add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+
+
+
+
+
Page Title
+
+
+
+
+
+```
+
+Save and open this file up in a web browser (you can use
"Live Server" on Visual Studio Code to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `
+
+
+```
+
+Save and open this file up in a web browser (you can use
"Live Server" on Visual Studio Code to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `
+
+
+```
+
+Save and open this file up in a web browser (you can use
"Live Server" on Visual Studio Code to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `
+
+
+```
+
+Save and open this file up in a web browser (you can use
"Live Server" on Visual Studio Code to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `
+
+