Skip to content

Commit

Permalink
chore(i18n,learn): processed translations (#80)
Browse files Browse the repository at this point in the history
  • Loading branch information
@camperbot
camperbot authored Oct 15, 2024
1 parent 5b636fd commit 1141957
Show file tree
Hide file tree
Showing 4,526 changed files with 39,120 additions and 25,876 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
2 changes: 1 addition & 1 deletion ...b-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ You can use the `hr` tag to add a horizontal line across the width of its contai

قم بإضافة كود `hr` أسفل كود `h4` الذي يحوي على عنوان البطاقة.

**Note:** In HTML, `hr` is a self-closing tag, and therefore doesn't need a separate closing tag.
**Note:** In HTML, `hr` is a void element, and therefore doesn't need a separate closing tag.

# --hints--

Expand Down
2 changes: 1 addition & 1 deletion ...bic/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ You can add images to your website by using the `img` element, and point to a sp
<img src="https://www.freecatphotoapp.com/your-image.jpg">
```

لاحظ أن عناصر `img` مغلقة ذاتيا.
Note that `img` is a void element.

جميع العناصر `img` **يجب أن ** تحتوي على الصفة `alt`. يتم استخدام النص داخل الصفة `alt` لقارئ الشاشة لتحسين ال accessibility ويتم عرضه إذا فشلت الصورة في التحميل.

Expand Down
2 changes: 1 addition & 1 deletion ...ponsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Placeholder text is what is displayed in your `input` element before your user h
<input type="text" placeholder="this is placeholder text">
```

**ملاحظة:** تذكر أن عناصر `input` مغلقة ذاتيا.
**Note:** Remember that `input` is a void element.

# --instructions--

Expand Down
2 changes: 1 addition & 1 deletion ...ges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ You can create a text input like this:
<input type="text">
```

Note that `input` elements are self-closing.
Note that `input` is a void element.

# --instructions--

Expand Down
2 changes: 1 addition & 1 deletion ...c/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ So far, you’ve seen how JSX differs from HTML in a key way with the use of `cl

وهناك طريقة هامة أخرى تختلف فيها JSX عن HTML وهي ظريقة علامة الإغلاق الذاتي (self-closing tag).

في HTML، جميع العلامات تقريبا لديها علامات فتح وإغلاق على حد سواء: `<div></div>`؛ علامة الإغلاق تحتوي دائما على قطع أمامي قبل اسم العلامة التي تغلقاها. غير أن هناك حالات خاصة في HTML تسمى "علامات الإغلاق الذاتي". أو العلامات التي لا تتطلب علامة فتح أو إغلاق قبل أن تبدأ علامة أخرى.
في HTML، جميع العلامات تقريبا لديها علامات فتح وإغلاق على حد سواء: `<div></div>`؛ علامة الإغلاق تحتوي دائما على قطع أمامي قبل اسم العلامة التي تغلقاها. However, there are special instances in HTML called <dfn>void elements</dfn>, or elements that don’t require both an opening and closing tag before another element can start.

على سبيل المثال، يمكن كتابة علامة مثل `<br>` أو `<br />`، ولكن لا ينبغي أن يكتب على أنه `<br></br>` لأنه لا يحتوي على أي محتوى.

Expand Down
4 changes: 2 additions & 2 deletions ...tion-by-building-a-projectile-trajectory-calculator/663353465bfb14259717da93.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ The method should return the correct output.
```js
({
test: () => assert(runPython(
`str = """
`a = """
x y
0 3.00
1 3.90
Expand All @@ -65,7 +65,7 @@ The method should return the correct output.
"""
ball = Projectile(10, 3, 45)
g = Graph(ball.calculate_all_coordinates())
g.create_coordinates_table() == str`
g.create_coordinates_table() == a`
))
})
```
Expand Down
200 changes: 197 additions & 3 deletions ...eb-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ dashedName: step-67

# --description--

Certain types of motion-based animations can cause discomfort for some users. In particular, people with <dfn>vestibular</dfn> disorders have sensitivity to certain motion triggers.
Finally, certain types of motion-based animations can cause discomfort for some users. In particular, people with <dfn>vestibular</dfn> disorders have sensitivity to certain motion triggers.

يحتوي `@media` على مِيزة وسائط تسمى `prefers-reduced-motion` لتعيين CSS على أساس تفضيلات المستخدم. ويمكن أن تأخذ إحدى القيم التالية:

Expand All @@ -24,14 +24,16 @@ Certain types of motion-based animations can cause discomfort for some users. In

---

اغلق قاعدة النمط الذي تحدد `scroll-behavior: smooth` بداخل `@media` على قاعدة مع مِيزة الوسائط `prefers-reduced-motion` مع `no-preference` تعيين القيمة.
Wrap the style rule that sets `scroll-behavior: smooth` within a `@media` at-rule with the media feature `prefers-reduced-motion` having `no-preference` set as the value.

Well done. You have completed the Accessibility Quiz practice project.

# --hints--

يجب أن يكون لديك قاعدة `@media (prefers-reduced-motion: no-preference)` واحده.

```js
assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)').length, 1);
assert.lengthOf(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)'), 1);
```

يجب أن تدخل قاعدة `*` الحالية ضمن قاعدة `@media`.
Expand Down Expand Up @@ -358,3 +360,195 @@ address {
}
```
# --solutions--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" alt="freeCodeCamp" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="selector">Can the CSS margin property accept negative values?</label>
</div>
<div class="answer">
<select name="selector" id="selector" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-textarea" name="css-questions" rows="5" cols="24"></textarea>
</div>
</div>
</section>
<button type="submit">Send</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>

```
```css @media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}

body { background: #f5f6f7; color: #1b1b32; font-family: Helvetica; margin: 0; }

header { width: 100%; height: 50px; background-color: #1b1b32; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; }

# logo {
width: max(10rem, 18vw); background-color: #0a0a23; aspect-ratio: 35 / 4; padding: 0.4rem; }

h1 { color: #f1be32; font-size: min(5vw, 1.2em); text-align: center; }

nav { width: 50%; max-width: 300px; height: 50px; }

nav > ul { display: flex; justify-content: space-evenly; flex-wrap: wrap; align-items: center; padding-inline-start: 0; margin-block: 0; height: 100%; }

nav > ul > li { color: #dfdfe2; margin: 0 0.2rem; padding: 0.2rem; display: block; }

nav > ul > li:hover { background-color: #dfdfe2; color: #1b1b32; cursor: pointer; }

li > a { color: inherit; text-decoration: none; }

main { padding-top: 50px; }

section { width: 80%; margin: 0 auto 10px auto; max-width: 600px; }

h1, h2 { font-family: Verdana, Tahoma; }

h2 { border-bottom: 4px solid #dfdfe2; margin-top: 0px; padding-top: 60px; }

.info { padding: 10px 0 0 5px; }

.formrow { margin-top: 30px; padding: 0px 15px; }

input { font-size: 1rem; }

.info label, .info input { display: inline-block; }

.info input { width: 50%; text-align: left; }

.info label { width: 10%; min-width: 55px; text-align: right; }

.question-block { text-align: left; display: block; width: 100%; margin-top: 20px; padding-top: 5px; }

h3 { margin-top: 5px; padding-left: 15px; font-size: 1.375rem; }

h3::before { content: "Question #"; }

.question { border: none; padding-bottom: 0; }

.answers-list { list-style: none; padding: 0; }

button { display: block; margin: 40px auto; width: 40%; padding: 15px; font-size: 1.438rem; background: #d0d0d5; border: 3px solid #3b3b4f; }

footer { background-color: #2a2a40; display: flex; justify-content: center; }

footer, footer a { color: #dfdfe2; }

address { text-align: center; padding: 0.3em; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
2 changes: 1 addition & 1 deletion ...web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ Your fourth `h4` should have the text `V4 - 2016`.
assert(document.querySelectorAll('.lists li h4')?.[3]?.innerText === 'V4 - 2016');
```
Your fourth `p` should have the text `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School`.
Your fourth `p` should have the text `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.`
```js
assert(document.querySelectorAll('.lists li p')?.[3]?.innerText === 'We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.');
Expand Down
2 changes: 1 addition & 1 deletion ...-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const newArray = array.map((arrayValue) => {
console.log(newArray); // Output: [2, 4, 6, 8, 10]
```

The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2; }` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.

# --questions--

Expand Down
4 changes: 2 additions & 2 deletions ...rabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ dashedName: css-foundations-lesson-f

Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.

External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a `<link>` element (which is a void element and doesn't require a closing tag):

First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
First, you add a void element `<link>` tag inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.

Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.

Expand Down
4 changes: 2 additions & 2 deletions ...bic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ dashedName: html-foundations-lesson-b

You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.

There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as void elements 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.

Expand All @@ -19,7 +19,7 @@ Using the correct elements for content is called semantic HTML. You will explore

## --text--

Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
Why are void elements like `<br/>` or `<img>` essential in HTML?

## --answers--

Expand Down
2 changes: 1 addition & 1 deletion ...es/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ dashedName: links-and-images-lesson-e

Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.

To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.

Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.

Expand Down
2 changes: 1 addition & 1 deletion ...es/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ dashedName: links-and-images-lesson-f

Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.

To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.

Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.

Expand Down
Loading

0 comments on commit 1141957

Please sign in to comment.