chore(i18n,learn): processed translations

curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md

@@ -7,7 +7,7 @@ dashedName: step-12
 
 # --description--
 
-Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide.
+Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide.
 
 Now, delete your two `print()` calls.
 

curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md

@@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu
 
 ### --feedback--
 
-This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form.
+This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form.
 
 # --scene--
 

curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md

@@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. Your `#house` should have a background color and a border set.
 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`.
 1. All of the immediate children of the `#house` should have a `position` of `absolute`.
-1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set.
+1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set.
 1. Your `#roof` should have a top value of `0`.
 1. Your `#door` should be placed at the bottom of your house.
 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height.

curriculum/challenges/chinese-traditional/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md

@@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`.
 
-5. The `space` `div` should be centered on the page and have a width and height of `200px`.
+5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`.
 
-6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`.
+6. The `div` element with a `class` of `space` should use `relative` positioning.
 
-7. The `earth` `div` should have a width and height of `100px`.
+7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element.
 
-8.  The `orbit` `div` should have a width and height of `200px`.
+8. The `.earth` element should have a width and height of `100px`.
 
-9.  The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes.
+9.  The `.orbit` element should have a width and height of `200px`.
 
-10. The orbit path for the moon around the Earth should be a circle.
+10.  The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes.
 
-11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally.
+11. The orbit path for the moon around the Earth should be a circle.
 
-12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width.
+12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally.
 
-13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets.
+13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width.
 
-14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations.
+14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets.
+
+15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations.
 
 **Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
 
@@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2
 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px');
 ```
 
-You should have a `div` with the class `earth` inside the `.space` `div`.
+The `.space` element should have a `position` property of `relative`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative')
+```
+
+You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`.
 
 ```js
 assert.exists(document.querySelector('div.space div.earth'));

curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md

@@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page.
 
 ---
 
-They are selector used to add movement effects to an element during interactions.
+They are selectors used to add movement effects to an element during interactions.
 
 #### --answer--
 

curriculum/challenges/chinese-traditional/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md

@@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## CSS Frameworks
 
+- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized.
+- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation.
+- **Potential disadvantages**:
+  - The CSS provided by the framework might conflict with your custom CSS.
+  - Your website might look similar to other websites using the same framework.
+  - Large frameworks might cause performance issues.
+
+## Two Types of CSS Frameworks
+
+- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework.
+
+Here is an example of using Tailwind CSS to style a button.
+
+```html
+<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">
+  Button
+</button>
+```
+
+- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework.
+
+Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure.
+
+```html
+<div class="card" style="width: 25rem;">
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">HTML</li>
+    <li class="list-group-item">CSS</li>
+    <li class="list-group-item">JavaScript</li>
+  </ul>
+</div>
+```
+
+## CSS Preprocessors
+
+- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects.
+- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance.
+- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus.
+- **Potential disadvantages**:
+  - Compiling the CSS rules into standard CSS might cause overhead.
+  - The compiled code may be difficult to debug.
+
+## Sass
+
+- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets."
+- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations
+
+## Two Syntaxes Supported by Sass
+
+- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension.
+
+Here is an example of defining and using a variable in SCSS.
+
+```scss
+$primary-color: #3498eb;
+
+header {
+  background-color: $primary-color;
+}
+```
+
+- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax."
+
+Here is an example of defining and using a variable in the indented syntax.
+
+```sass
+$primary-color: #3498eb
+
+header
+  background-color: $primary-color
+```
+
+### Mixins
+
+- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet.
+
+Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox.
+
+```scss
+@mixin center-flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+Here is an example of using the mixin you defined.
+
+```scss
+section {
+  @include center-flex;
+  height: 500px;
+  background-color: #3289a8;
+}
+```
 
 # --assignment--
 

curriculum/challenges/chinese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md

@@ -7,7 +7,7 @@ dashedName: step-12
 
 # --description--
 
-Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide.
+Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide.
 
 Now, delete your two `print()` calls.
 

curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md

@@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu
 
 ### --feedback--
 
-This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form.
+This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form.
 
 # --scene--
 

curriculum/challenges/chinese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md

@@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. Your `#house` should have a background color and a border set.
 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`.
 1. All of the immediate children of the `#house` should have a `position` of `absolute`.
-1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set.
+1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set.
 1. Your `#roof` should have a top value of `0`.
 1. Your `#door` should be placed at the bottom of your house.
 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height.

curriculum/challenges/chinese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md

@@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`.
 
-5. The `space` `div` should be centered on the page and have a width and height of `200px`.
+5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`.
 
-6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`.
+6. The `div` element with a `class` of `space` should use `relative` positioning.
 
-7. The `earth` `div` should have a width and height of `100px`.
+7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element.
 
-8.  The `orbit` `div` should have a width and height of `200px`.
+8. The `.earth` element should have a width and height of `100px`.
 
-9.  The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes.
+9.  The `.orbit` element should have a width and height of `200px`.
 
-10. The orbit path for the moon around the Earth should be a circle.
+10.  The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes.
 
-11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally.
+11. The orbit path for the moon around the Earth should be a circle.
 
-12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width.
+12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally.
 
-13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets.
+13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width.
 
-14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations.
+14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets.
+
+15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations.
 
 **Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
 
@@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2
 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px');
 ```
 
-You should have a `div` with the class `earth` inside the `.space` `div`.
+The `.space` element should have a `position` property of `relative`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative')
+```
+
+You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`.
 
 ```js
 assert.exists(document.querySelector('div.space div.earth'));

curriculum/challenges/chinese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md

@@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page.
 
 ---
 
-They are selector used to add movement effects to an element during interactions.
+They are selectors used to add movement effects to an element during interactions.
 
 #### --answer--