chore(i18n,learn): processed translations (#99)

curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md

@@ -7,9 +7,9 @@ dashedName: step-39
 
 # --description--
 
-Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p` element's width a little less than `50%`.
+Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. White space characters can cause this issue as well.
 
-將每個 class 的 `width` 值更改爲 `49%`，看看會發生什麼。
+One way to fix this is to make each `p` element's width a little less than `50%`. 將每個 class 的 `width` 值更改爲 `49%`，看看會發生什麼。
 
 # --hints--
 

curriculum/challenges/chinese-traditional/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md

@@ -9,7 +9,86 @@ dashedName: review-css-colors
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## Color Theory
 
+- **Color Theory Definition**: This is the study of how colors interact with each other and how they affect our perception. It covers color relationships, color harmony, and the psychological impact of color.
+- **Primary Colors**: These colors which are yellow, blue, and red, are the fundamental hues from which all other colors are derived.
+- **Secondary Colors**: These colors result from mixing equal amounts of two primary colors. Green, orange, and purple are examples of secondary colors.
+- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet, are examples of tertiary colors.
+- **Warm Colors**: These colors which include reds, oranges, and yellows, evoke feelings of comfort, warmth, and coziness.
+- **Cool Colors**: These colors which include blues, green, and purples, evoke feelings of calmness, serenity, and professionalism.
+- **Color Wheel**: The color wheel is a circular diagram that shows how colors relate to each other. It's an essential tool for designers because it helps them to select color combinations.
+- **Analogous Color Schemes**: These color schemes create cohesive and soothing experiences. They have analogous colors, which are adjacent to each other in the color wheel.
+- **Complementary Color Schemes**: These color schemes create high contrast and visual impact. Their colors are located on the opposite ends of the color wheel, relative to each other.
+- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, like you can see in this example.
+- **Monochromatic Color Scheme**: For this color scheme, all the colors are derived from the same base color by adjusting its lightness, darkness, and saturation. This evokes a feeling of unity and harmony while still creating contrast.
+
+## Different Ways to Work with Colors in CSS
+
+- **Named Colors**: These colors are predefined color names recognized by browsers. Examples include `blue`, `darkred`, `lightgreen`.
+- **`rgb()` Function**: RGB stands for Red, Green, and Blue — the primary colors of light. These three colors are combined in different intensities to create a wide range of colors. the `rgb()` function allows you to define colors using the RGB color model.
+
+```css
+p {
+  color: rgb(255, 0, 0);
+}
+```
+
+- **`rgba()` Function**: This function adds a fourth value —alpha— that controls the transparency of the color.
+
+```css
+div {
+  background-color: rgba(0, 0, 255, 0.5);
+}
+```
+
+- **`hsl()` Function**: HSL stands for Hue, Saturation, and Lightness — three key components that define a color.
+
+```css
+p {
+  color: hsl(120, 100%, 50%);
+}
+```
+
+- **`hsla()` Function**: This function adds a fourth value -alpha- that controls the opacity of the color.
+
+```css
+div {
+  background-color: hsla(0, 100%, 50%, 0.5);
+}
+```
+
+- **Hexadecimal**: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F.
+
+```css
+h1 {
+  color: #FF5733; /* A reddish-orange color */
+}
+
+p {
+  background-color: #4CAF50; /* A shade of green */
+}
+```
+
+## Linear and Radial Gradients
+
+- **Linear Gradients**: These gradients create a gradual blend between colors along a straight line. You can control the direction of this line and the colors used.
+
+```css
+.linear-gradient {
+  background: linear-gradient(to right, red, blue);
+  height: 40vh;
+}
+```
+
+- **Radial Gradients**: These gradients create circular or elliptical gradients that radiate from a central point.
+
+```css
+.radial-gradient {
+  background: radial-gradient(circle, red, blue);
+  height: 40vh;
+}
+```
 
 # --assignment--
 

curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md

@@ -9,7 +9,46 @@ dashedName: review-css-flexbox
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## Introduction to CSS Flexbox and Flex Model
 
+- **Definition**: CSS flexbox is a one-dimensional layout model that allows you to arrange elements in rows and columns within a container.
+- **Flex Model**: This model defines how flex items are arranged within a flex container. Every flex container has two axes: the main axis and the cross axis.
+
+## The `flex-direction` Property
+
+- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left).
+- **`flex-direction: row-reverse;`**: This reverses the items in the row.
+- **`flex-direction: column;`**: This will align the flex items vertically instead of horizontally.
+- **`flex-direction: column-reverse;`**: This reverses the order of the flex items vertically.
+
+## The `flex-wrap` Property
+
+- **Definition**: This property determines how flex items are wrapped within a flex container to fit the available space. `flex-wrap` can take three possible values: `nowrap`, `wrap`, and `wrap-reverse`.
+- **`flex-wrap: nowrap;`**: This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container's width.
+- **`flex-wrap: wrap;`**: This property will wrap the items when they exceed the width of their container.
+- **`flex-wrap: wrap-reverse;`**: This property will wrap flex items in reverse order.
+- **`flex-flow` Property**: This property is a shorthand property for `flex-direction` and `flex-wrap`. In this example, we set `flex-direction` to `column` and `flex-wrap` to `wrap-reverse`.
+
+```css
+flex-flow: column wrap-reverse;
+```
+
+## The `justify-content` Property
+
+- **Definition**: This property aligns the child elements along the main axis of the flex container.
+- **`justify-content: flex-start;`**: In this case, the flex items will be aligned to the start of the main axis. This could be horizontal or vertical.
+- **`justify-content: flex-end;`**: In this case, the flex items are aligned to the end of the main axis, horizontally or vertically.
+- **`justify-content: center;`**: This centers the flex items along the main axis.
+- **`justify-content: space-between;`**: This will distribute the elements evenly along the main axis.
+- **`justify-content: space-around;`**: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item.
+- **`justify-content: space-evenly;`**: This will distributes the items evenly along the main axis.
+
+## The `align-items` Property
+
+- **Definition**: This property is used to distribute items along the cross axis. Remember that the cross axis is perpendicular to the main axis.
+- **`align-items: center;`**: This is used to center the items along the cross axis.
+- **`align-items: flex-start;`**: This aligns the items to the start of the cross axis.
+- **`align-items: stretch;`**: This is used to stretch the flex items along the cross axis.
 
 # --assignment--
 

curriculum/challenges/chinese-traditional/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md

@@ -9,7 +9,17 @@ dashedName: review-styling-forms
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## Best Practices for Styling Inputs
 
+- **Styling Inputs**: As with all text elements, you need to ensure the styles you apply to text inputs are accessible. This means the font needs to be adequately sized, and the color needs to have sufficient contrast with the background. Input elements are also focusable. When you are editing your styles, you should take care that you preserve a noticeable indicator when the element has focus, such as a bold border.
+
+## Using `appearance: none` for Inputs
+
+- **`appearance: none`**: Browsers apply default styling to a lot of elements. The `appearance: none` CSS property gives you complete control over the styling, but comes with some caveats. When building custom styles for input elements, you will need to make sure focus and error indicators are still present.
+
+## Commons Issues Styling `datetime-local` and `color` Properties
+
+- **Common Issues**: These special types of inputs rely on complex pseudo-elements to create things like the date and color pickers. This presents a significant challenge for styling these inputs. One challenge is that the default styling is entirely browser-dependent, so the CSS you write to make the picker look the way you intend may be entirely different on another browser.
 
 # --assignment--
 

curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md

@@ -7,9 +7,9 @@ dashedName: step-39
 
 # --description--
 
-Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p` element's width a little less than `50%`.
+Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. White space characters can cause this issue as well.
 
-将每个 class 的 `width` 值更改为 `49%`，看看会发生什么。
+One way to fix this is to make each `p` element's width a little less than `50%`. 将每个 class 的 `width` 值更改为 `49%`，看看会发生什么。
 
 # --hints--
 

curriculum/challenges/chinese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md

@@ -9,7 +9,86 @@ dashedName: review-css-colors
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## Color Theory
 
+- **Color Theory Definition**: This is the study of how colors interact with each other and how they affect our perception. It covers color relationships, color harmony, and the psychological impact of color.
+- **Primary Colors**: These colors which are yellow, blue, and red, are the fundamental hues from which all other colors are derived.
+- **Secondary Colors**: These colors result from mixing equal amounts of two primary colors. Green, orange, and purple are examples of secondary colors.
+- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet, are examples of tertiary colors.
+- **Warm Colors**: These colors which include reds, oranges, and yellows, evoke feelings of comfort, warmth, and coziness.
+- **Cool Colors**: These colors which include blues, green, and purples, evoke feelings of calmness, serenity, and professionalism.
+- **Color Wheel**: The color wheel is a circular diagram that shows how colors relate to each other. It's an essential tool for designers because it helps them to select color combinations.
+- **Analogous Color Schemes**: These color schemes create cohesive and soothing experiences. They have analogous colors, which are adjacent to each other in the color wheel.
+- **Complementary Color Schemes**: These color schemes create high contrast and visual impact. Their colors are located on the opposite ends of the color wheel, relative to each other.
+- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, like you can see in this example.
+- **Monochromatic Color Scheme**: For this color scheme, all the colors are derived from the same base color by adjusting its lightness, darkness, and saturation. This evokes a feeling of unity and harmony while still creating contrast.
+
+## Different Ways to Work with Colors in CSS
+
+- **Named Colors**: These colors are predefined color names recognized by browsers. Examples include `blue`, `darkred`, `lightgreen`.
+- **`rgb()` Function**: RGB stands for Red, Green, and Blue — the primary colors of light. These three colors are combined in different intensities to create a wide range of colors. the `rgb()` function allows you to define colors using the RGB color model.
+
+```css
+p {
+  color: rgb(255, 0, 0);
+}
+```
+
+- **`rgba()` Function**: This function adds a fourth value —alpha— that controls the transparency of the color.
+
+```css
+div {
+  background-color: rgba(0, 0, 255, 0.5);
+}
+```
+
+- **`hsl()` Function**: HSL stands for Hue, Saturation, and Lightness — three key components that define a color.
+
+```css
+p {
+  color: hsl(120, 100%, 50%);
+}
+```
+
+- **`hsla()` Function**: This function adds a fourth value -alpha- that controls the opacity of the color.
+
+```css
+div {
+  background-color: hsla(0, 100%, 50%, 0.5);
+}
+```
+
+- **Hexadecimal**: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F.
+
+```css
+h1 {
+  color: #FF5733; /* A reddish-orange color */
+}
+
+p {
+  background-color: #4CAF50; /* A shade of green */
+}
+```
+
+## Linear and Radial Gradients
+
+- **Linear Gradients**: These gradients create a gradual blend between colors along a straight line. You can control the direction of this line and the colors used.
+
+```css
+.linear-gradient {
+  background: linear-gradient(to right, red, blue);
+  height: 40vh;
+}
+```
+
+- **Radial Gradients**: These gradients create circular or elliptical gradients that radiate from a central point.
+
+```css
+.radial-gradient {
+  background: radial-gradient(circle, red, blue);
+  height: 40vh;
+}
+```
 
 # --assignment--
 

curriculum/challenges/chinese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md

@@ -9,7 +9,46 @@ dashedName: review-css-flexbox
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## Introduction to CSS Flexbox and Flex Model
 
+- **Definition**: CSS flexbox is a one-dimensional layout model that allows you to arrange elements in rows and columns within a container.
+- **Flex Model**: This model defines how flex items are arranged within a flex container. Every flex container has two axes: the main axis and the cross axis.
+
+## The `flex-direction` Property
+
+- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left).
+- **`flex-direction: row-reverse;`**: This reverses the items in the row.
+- **`flex-direction: column;`**: This will align the flex items vertically instead of horizontally.
+- **`flex-direction: column-reverse;`**: This reverses the order of the flex items vertically.
+
+## The `flex-wrap` Property
+
+- **Definition**: This property determines how flex items are wrapped within a flex container to fit the available space. `flex-wrap` can take three possible values: `nowrap`, `wrap`, and `wrap-reverse`.
+- **`flex-wrap: nowrap;`**: This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container's width.
+- **`flex-wrap: wrap;`**: This property will wrap the items when they exceed the width of their container.
+- **`flex-wrap: wrap-reverse;`**: This property will wrap flex items in reverse order.
+- **`flex-flow` Property**: This property is a shorthand property for `flex-direction` and `flex-wrap`. In this example, we set `flex-direction` to `column` and `flex-wrap` to `wrap-reverse`.
+
+```css
+flex-flow: column wrap-reverse;
+```
+
+## The `justify-content` Property
+
+- **Definition**: This property aligns the child elements along the main axis of the flex container.
+- **`justify-content: flex-start;`**: In this case, the flex items will be aligned to the start of the main axis. This could be horizontal or vertical.
+- **`justify-content: flex-end;`**: In this case, the flex items are aligned to the end of the main axis, horizontally or vertically.
+- **`justify-content: center;`**: This centers the flex items along the main axis.
+- **`justify-content: space-between;`**: This will distribute the elements evenly along the main axis.
+- **`justify-content: space-around;`**: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item.
+- **`justify-content: space-evenly;`**: This will distributes the items evenly along the main axis.
+
+## The `align-items` Property
+
+- **Definition**: This property is used to distribute items along the cross axis. Remember that the cross axis is perpendicular to the main axis.
+- **`align-items: center;`**: This is used to center the items along the cross axis.
+- **`align-items: flex-start;`**: This aligns the items to the start of the cross axis.
+- **`align-items: stretch;`**: This is used to stretch the flex items along the cross axis.
 
 # --assignment--
 

curriculum/challenges/chinese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md

@@ -9,7 +9,17 @@ dashedName: review-styling-forms
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## Best Practices for Styling Inputs
 
+- **Styling Inputs**: As with all text elements, you need to ensure the styles you apply to text inputs are accessible. This means the font needs to be adequately sized, and the color needs to have sufficient contrast with the background. Input elements are also focusable. When you are editing your styles, you should take care that you preserve a noticeable indicator when the element has focus, such as a bold border.
+
+## Using `appearance: none` for Inputs
+
+- **`appearance: none`**: Browsers apply default styling to a lot of elements. The `appearance: none` CSS property gives you complete control over the styling, but comes with some caveats. When building custom styles for input elements, you will need to make sure focus and error indicators are still present.
+
+## Commons Issues Styling `datetime-local` and `color` Properties
+
+- **Common Issues**: These special types of inputs rely on complex pseudo-elements to create things like the date and color pickers. This presents a significant challenge for styling these inputs. One challenge is that the default styling is entirely browser-dependent, so the CSS you write to make the picker look the way you intend may be entirely different on another browser.
 
 # --assignment--
 

curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md

@@ -8,7 +8,7 @@ dashedName: create-a-bar-for-each-data-point-in-the-set
 
 # --description--
 
-The last challenge added only one rectangle to the `svg` element to represent a bar. Here, you'll combine what you've learned so far about `data()`, `enter()`, and SVG shapes to create and append a rectangle for each data point in `dataset`.
+El anterior desafío agrega solo un rectángulo al elemento `svg` para representar una barra. Ahora, combinarás lo que has aprendido hasta ahora sobre `data()`, `enter()`, y formas SVG para crear y añadir un rectángulo para cada punto de dato en `dataset`.
 
 Uno de los desafíos anteriores mostró el formato para cómo crear y añadir un `div` para cada elemento en `dataset`: