diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md index 1f1d362dc0..69d1f03fea 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md +++ b/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-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index f7a4b08e1c..9e1a3d3e81 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/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-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md index 38d462e02f..f96930b45c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md +++ b/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-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md index c43145b52e..c9104ab320 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md +++ b/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-- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md index 4340a5ca53..d67595b91f 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md +++ b/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-- diff --git a/curriculum/challenges/chinese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/chinese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index f7a4b08e1c..9e1a3d3e81 100644 --- a/curriculum/challenges/chinese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/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-- diff --git a/curriculum/challenges/chinese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/chinese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md index 38d462e02f..f96930b45c 100644 --- a/curriculum/challenges/chinese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md +++ b/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-- diff --git a/curriculum/challenges/chinese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md b/curriculum/challenges/chinese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md index c43145b52e..c9104ab320 100644 --- a/curriculum/challenges/chinese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md +++ b/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-- diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md index 141eb3e65e..21dd5624f1 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md +++ b/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`: diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md index 6d78321409..22579f5797 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md @@ -8,7 +8,7 @@ dashedName: use-a-pre-defined-scale-to-place-elements # --description-- -With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the `x` and `y` raw data into values that fit and render correctly on the SVG. They keep the data within the screen's plotting area. +Con las escalas configuradas, es hora de trazar el diagrama de dispersión nuevamente. Las escalas son como funciones de procesamiento que convierten los datos brutos `x` y `y` en valores que se ajustan y representan correctamente en el SVG. Mantienen los datos dentro del área de trazado de la pantalla. Establece los valores de los atributos de coordenada para una forma SVG con la función escaladora. Esto incluye los atributos `x` e `y` para `rect` o elementos `text`, o `cx` y `cy` para `circles`. He aquí un ejemplo: diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md index e8ecd21371..3129112ad9 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md @@ -8,7 +8,7 @@ dashedName: use-dynamic-scales # --description-- -The D3 `min()` and `max()` methods are useful to help set the scale. +Los métodos `min()` y `max()` de D3 son útiles para ayudar a establecer la escala. Dado un conjunto de datos complejo, una de las prioridades es establecer la escala para que la visualización encaje la anchura y altura del contenedor SVG. Quieres que todos los datos trazados dentro de la SVG por lo que es visible en la página web. diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md index 0494f432cd..9cb184db62 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md @@ -8,7 +8,7 @@ dashedName: convert-json-data-to-html # --description-- -Now that you're getting data from a JSON API, you can display it in the HTML. +Ahora que estás obteniendo datos de una API JSON, puedes mostrarlos en el HTML. Puedes utilizar un método `forEach` para hacer un bucle a través de los datos, ya que los objetos de foto del gato se mantienen en un arreglo. A medida que llegas a cada elemento, puedes modificar los elementos HTML. diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-string-manipulation-by-building-a-cipher/6551f22653e6ce6e4f1d1370.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-string-manipulation-by-building-a-cipher/6551f22653e6ce6e4f1d1370.md index 2aa9c6dbf4..947ef5c6cf 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-string-manipulation-by-building-a-cipher/6551f22653e6ce6e4f1d1370.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-string-manipulation-by-building-a-cipher/6551f22653e6ce6e4f1d1370.md @@ -23,7 +23,7 @@ Debes pasar `shift` a la función `type()`. assert.match(code, /type\s*\(\s*shift\s*\)/) ``` -You should pass `type(shift)` to your `print()` function. Pay attention to place the function call at the beginning of the line. +Debes pasar `type(shift)` a tu función `print()`. Pay attention to place the function call at the beginning of the line. ```js assert.match(code, /^print\s*\(\s*type\s*\(\s*shift\s*\)\s*\)/m) diff --git a/curriculum/challenges/espanol/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md b/curriculum/challenges/espanol/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md index f793ee725e..266ff42992 100644 --- a/curriculum/challenges/espanol/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md +++ b/curriculum/challenges/espanol/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md @@ -10,7 +10,7 @@ dashedName: how-deep-neural-networks-work ## --text-- -Why is it better to calculate the gradient (slope) directly rather than numerically? +¿Por qué es mejor calcular el gradiente (pendiente) directamente en lugar de hacerlo numéricamente? ## --answers-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md index ffc75bee7e..9707b9bf97 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md @@ -7,9 +7,9 @@ dashedName: step-39 # --description-- -Bueno, eso no funcionó. Cambiar los elementos `p` a `inline-block` y colocarlos en líneas diferentes, crea un espacio extra a la derecha del primer elemento `p`, haciendo que el segundo se mueva a la siguiente línea. Una forma de arreglar esto, es hacer que el ancho (width) de cada elemento `p` sea un poco menor que `50%`. +Bueno, eso no funcionó. Cambiar los elementos `p` a `inline-block` y colocarlos en líneas diferentes, crea un espacio extra a la derecha del primer elemento `p`, haciendo que el segundo se mueva a la siguiente línea. White space characters can cause this issue as well. -Cambia el valor de la propiedad `width` a `49%` en cada clase para ver qué sucede. +Una forma de arreglar esto, es hacer que el ancho (width) de cada elemento `p` sea un poco menor que `50%`. Cambia el valor de la propiedad `width` a `49%` en cada clase para ver qué sucede. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md index 33e65c224e..4bc7889ea1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md @@ -7,7 +7,7 @@ dashedName: step-8 # --description-- -Create a `div` element in the `body` with a class of `background-buildings`. Este será un contenedor para un grupo de edificios. +Crea un elemento `div` dentro del elemento `body` con una clase de `background-buildings`. Este será un contenedor para un grupo de edificios. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md index 02a42a110f..a4b47da4bc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md @@ -7,7 +7,7 @@ dashedName: step-63 # --description-- -Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. +Dale a los nuevos elementos `div` estos valores de `width` y `height`: `3%` y `10%` a `.bb4a`, `80%` y `5%` a `.bb4b`y `100%` y `85%` a `.bb4c`. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md index 971e78188b..8975086811 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md @@ -7,7 +7,7 @@ dashedName: step-29 # --description-- -Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`. +Crea un selector `body` con una propiedad `font-family` de `sans-serif` y un `color` de `#0a0a23`. # --hints-- diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md index b09e390719..c3e2ddc94c 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md @@ -34,7 +34,7 @@ Debes usar la notación de punto para acceder a la propiedad `display` de la pro assert.match(goFight.toString(), /monsterStats\.style\.display/); ``` -You should set the `display` property to `block`. +La propiedad `display` debe tener el valor `block`. ```js assert.match(goFight.toString(), /monsterStats\.style\.display\s*=\s*('|")block\1/); diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/6461a1b2d5f508f374d72d30.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/6461a1b2d5f508f374d72d30.md index 931d500aec..5520e9de35 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/6461a1b2d5f508f374d72d30.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/6461a1b2d5f508f374d72d30.md @@ -13,7 +13,7 @@ Store them in `const` variables called `startScreen` and `checkpointScreen` resp # --hints-- -You should use `document.querySelector()`. +Debes usar `document.querySelector()`. ```js assert.match(code, /document\.querySelector\(/); diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650300a25b6f72964ab8aca6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650300a25b6f72964ab8aca6.md index 84e8063951..4506266d4a 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650300a25b6f72964ab8aca6.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/650300a25b6f72964ab8aca6.md @@ -15,7 +15,7 @@ Para hacer el `id` más único, añade otro guión y usa Date.now(). console.log(Date.now()); // 1628586800000 ``` -Para ver el nuevo resultado, haga clic en el botón `"Añadir nueva tarea"`. Luego añade un título de `WALK DOG` y haz clic en el botón `"Añadir tarea"`. Open up the console to see the result. +Para ver el nuevo resultado, haga clic en el botón `"Añadir nueva tarea"`. Luego añade un título de `WALK DOG` y haz clic en el botón `"Añadir tarea"`. Abre la consola para ver el resultado. # --hints-- diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md index 6bd7acbe13..a074800a7e 100644 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md @@ -25,7 +25,7 @@ anchor element --- -image element +elemento imagen --- diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md index 4c1ec926b7..df75e862a5 100644 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md +++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md @@ -37,7 +37,7 @@ If a same-named variable is declared inside the function then it shadows the out ## --text-- -What will be the output of the following code? +¿Cuál será la salida del siguiente código? ```js let x = 10; diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-104-pandigital-fibonacci-ends.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-104-pandigital-fibonacci-ends.md index baa7dcbfdb..11888f2b96 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-104-pandigital-fibonacci-ends.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-104-pandigital-fibonacci-ends.md @@ -8,7 +8,7 @@ dashedName: problem-104-pandigital-fibonacci-ends # --description-- -The Fibonacci sequence is defined by the recurrence relation: +La sucesión de Fibonacci se define por la siguiente relación recursiva: $F_n = F_{n − 1} + F_{n − 2}$, where $F_1 = 1$ and $F_2 = 1$ diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-121-disc-game-prize-fund.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-121-disc-game-prize-fund.md index 6b17cf1d09..e8450d05e9 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-121-disc-game-prize-fund.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-121-disc-game-prize-fund.md @@ -8,7 +8,7 @@ dashedName: problem-121-disc-game-prize-fund # --description-- -A bag contains one red disc and one blue disc. In a game of chance a player takes a disc at random and its colour is noted. After each turn the disc is returned to the bag, an extra red disc is added, and another disc is taken at random. +Una bolsa contiene un disco rojo y un disco azul. En un juego de azar, un jugador toma un disco al azar y se anota su color. Después de cada turno, el disco se devuelve a la bolsa, se añade un disco rojo adicional, y se saca otro disco al azar. El jugador paga £1 para jugar y gana si ha tomado más discos azules que discos rojos al final del juego. diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-123-prime-square-remainders.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-123-prime-square-remainders.md index f04e438373..1f91d46327 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-123-prime-square-remainders.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-123-prime-square-remainders.md @@ -8,7 +8,7 @@ dashedName: problem-123-prime-square-remainders # --description-- -Let $p_n$ be the $n$th prime: 2, 3, 5, 7, 11, ..., and let $r$ be the remainder when ${(p_n−1)}^n + {(p_n+1)}^n$ is divided by ${p_n}^2$. +Sea $p_n$ el $n$-ésimo primo: 2, 3, 5, 7, 11, ..., y sea $r$ el residuo cuando ${(p_n−1)}^n + {(p_n+1)}^n$ es dividido por ${p_n}^2$. Por ejemplo, cuando $n = 3, p_3 = 5$, y $4^3 + 6^3 = 280 ≡ 5\\ mod\\ 25$. diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-126-cuboid-layers.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-126-cuboid-layers.md index 078873397d..6599373b8c 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-126-cuboid-layers.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-126-cuboid-layers.md @@ -8,7 +8,7 @@ dashedName: problem-126-cuboid-layers # --description-- -The minimum number of cubes to cover every visible face on a cuboid measuring 3 x 2 x 1 is twenty-two. +El número minimo de cubos para cubrir cada cara visible de un cuboide que mide 3 x 2 x 1 es veintidós. diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-166-criss-cross.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-166-criss-cross.md index aea98c6ae5..a2c8272485 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-166-criss-cross.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-166-criss-cross.md @@ -8,7 +8,7 @@ dashedName: problem-166-criss-cross # --description-- -A 4x4 grid is filled with digits $d$, $0 ≤ d ≤ 9$. +Una cuadrícula de 4x4 esta llena con dígitos $d$, $0 ≤ d ≤ 9$. Se puede ver que en la cuadrícula diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-201-to-300/problem-289-eulerian-cycles.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-201-to-300/problem-289-eulerian-cycles.md index 165b19eaf7..819485fd64 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-201-to-300/problem-289-eulerian-cycles.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-201-to-300/problem-289-eulerian-cycles.md @@ -18,7 +18,7 @@ The image below shows $E(3,3)$ and an example of an Eulerian non-crossing path. -Let $L(m,n)$ be the number of Eulerian non-crossing paths on $E(m,n)$. For example, $L(1,2) = 2$, $L(2,2) = 37$ and $L(3,3) = 104290$. +Let $L(m,n)$ be the number of Eulerian non-crossing paths on $E(m,n)$. Por ejemplo, $L(1,2) = 2$, $L(2,2) = 37$ y $L(3,3) = 104290$. Find $L(6,10)\bmod {10}^{10}$. diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-301-to-400/problem-385-ellipses-inside-triangles.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-301-to-400/problem-385-ellipses-inside-triangles.md index 7e3ca079e7..7d477b9edc 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-301-to-400/problem-385-ellipses-inside-triangles.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-301-to-400/problem-385-ellipses-inside-triangles.md @@ -23,7 +23,7 @@ For example, if $n = 8$, there are two such triangles. Their vertices are (-4,-3 It can be verified that $A(10) = 252$, $A(100) = 34\\,632$ and $A(1000) = 3\\,529\\,008$. -Find $A(1\\,000\\,000\\,000)$. +Encuentra $A(1\\,000\\,000\\,000)$. 1The foci (plural of focus) of an ellipse are two points $A$ and $B$ such that for every point $P$ on the boundary of the ellipse, $AP + PB$ is constant. diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-301-to-400/problem-393-migrating-ants.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-301-to-400/problem-393-migrating-ants.md index 28a0b4d745..6121052802 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-301-to-400/problem-393-migrating-ants.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-301-to-400/problem-393-migrating-ants.md @@ -16,7 +16,7 @@ We define $f(n)$ to be the number of ways this can happen without any ants endin You are given that $f(4) = 88$. -Find $f(10)$. +Encuentra $f(10)$. # --hints-- diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-419-look-and-say-sequence.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-419-look-and-say-sequence.md index 4143ab36cc..97133d1f97 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-419-look-and-say-sequence.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-419-look-and-say-sequence.md @@ -28,7 +28,7 @@ It helps to do this out loud: Define $A(n)$, $B(n)$ and $C(n)$ as the number of ones, twos and threes in the $n$'th element of the sequence respectively. One can verify that $A(40) = 31\\,254$, $B(40) = 20\\,259$ and $C(40) = 11\\,625$. -Find $A(n)$, $B(n)$ and $C(n)$ for $n = {10}^{12}$. Give your answer modulo $2^{30}$ as a string and separate your values for $A$, $B$ and $C$ by a comma. E.g. for $n = 40$ the answer would be `31254,20259,11625`. +Find $A(n)$, $B(n)$ and $C(n)$ for $n = {10}^{12}$. Give your answer modulo $2^{30}$ as a string and separate your values for $A$, $B$ and $C$ by a comma. Ejemplo. for $n = 40$ the answer would be `31254,20259,11625`. # --hints-- diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-425-prime-connection.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-425-prime-connection.md index dfba791e40..fb55349bab 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-425-prime-connection.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-425-prime-connection.md @@ -23,7 +23,7 @@ However, 11 and 103 are not 2's relatives. Let $F(N)$ be the sum of the primes $≤ N$ which are not 2's relatives. We can verify that $F({10}^3) = 431$ and $F({10}^4) = 78\\,728$. -Find $F({10}^7)$. +Encuentra $F({10}^7)$. # --hints-- diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-445-retractions-a.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-445-retractions-a.md index b1bb3ca6e3..49ac3f951f 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-445-retractions-a.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-445-retractions-a.md @@ -8,7 +8,7 @@ dashedName: problem-445-retractions-a # --description-- -For every integer $n > 1$, the family of functions $f_{n, a, b}$ is defined by: +Para cada entero $n > 1$, la familia de funciones $f_{n, a, b}$ se define por: $f_{n, a, b}(x) ≡ ax + b\bmod n$ para $a, b, x$ entero y $0 \lt a \lt n$, $0 \le b \lt n$, $0 \le x \lt n$. diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-478-mixtures.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-478-mixtures.md index d2f0dbd205..94426f04cc 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-478-mixtures.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-401-to-480/problem-478-mixtures.md @@ -16,7 +16,7 @@ For example, say we have three mixtures with ratios (3 : 0 : 2), (3 : 6 : 11) an However, with the same three mixtures, it is impossible to form the ratio (3 : 2 : 1), since the amount of $B$ is always less than the amount of $C$. -Let $n$ be a positive integer. Suppose that for every triple of integers $(a, b, c)$ with $0 ≤ a, b, c ≤ n$ and $gcd(a, b, c) = 1$, we have a mixture with ratio $(a : b : c)$. Let $M(n)$ be the set of all such mixtures. +Sea $n$ un entero positivo. Suppose that for every triple of integers $(a, b, c)$ with $0 ≤ a, b, c ≤ n$ and $gcd(a, b, c) = 1$, we have a mixture with ratio $(a : b : c)$. Let $M(n)$ be the set of all such mixtures. For example, $M(2)$ contains the 19 mixtures with the following ratios: diff --git a/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md b/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md index 268034e01c..c8870f6e48 100644 --- a/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md +++ b/curriculum/challenges/espanol/19-foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam.md @@ -1,6 +1,6 @@ --- id: 647e22d18acb466c97ccbef8 -title: 'Foundational C# with Microsoft Certification Exam' +title: 'Fundamentos de C# con examen de certificación de Microsoft' challengeType: 17 dashedName: foundational-c-sharp-with-microsoft-certification-exam prerequisites: diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b292a911788a7faf67415.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b292a911788a7faf67415.md index af8b413dc5..b3d1a2d6ca 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b292a911788a7faf67415.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b292a911788a7faf67415.md @@ -1,6 +1,6 @@ --- id: 657b292a911788a7faf67415 -title: Task 15 +title: Tarea 15 challengeType: 22 dashedName: task-15 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cebddc542e05459add214.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cebddc542e05459add214.md index 1f7c7733a9..1fb3b18016 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cebddc542e05459add214.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cebddc542e05459add214.md @@ -1,6 +1,6 @@ --- id: 657cebddc542e05459add214 -title: Task 67 +title: Tarea 67 challengeType: 22 dashedName: task-67 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc02d216cf41afa064333.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc02d216cf41afa064333.md index 11c75d03b3..ac9062afac 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc02d216cf41afa064333.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc02d216cf41afa064333.md @@ -1,6 +1,6 @@ --- id: 657dc02d216cf41afa064333 -title: Task 82 +title: Tarea 82 challengeType: 22 dashedName: task-82 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md index 2593d34679..a1dd8ac655 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md @@ -1,6 +1,6 @@ --- id: 657dc568fe84e53acc962fc3 -title: Task 95 +title: Tarea 95 challengeType: 19 dashedName: task-95 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md index f38a47e27c..3abf3c6903 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md @@ -1,6 +1,6 @@ --- id: 657dc9946a177a5938ad3854 -title: Task 104 +title: Tarea 104 challengeType: 22 dashedName: task-104 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcd1ade6c116a0bc7c9b2.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcd1ade6c116a0bc7c9b2.md index 5ebcd5a106..7b23ca5fc3 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcd1ade6c116a0bc7c9b2.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcd1ade6c116a0bc7c9b2.md @@ -1,6 +1,6 @@ --- id: 657dcd1ade6c116a0bc7c9b2 -title: Task 108 +title: Tarea 108 challengeType: 22 dashedName: task-108 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd5864c6f0e91483cc03b.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd5864c6f0e91483cc03b.md index a391df4e0e..88e1cd8724 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd5864c6f0e91483cc03b.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd5864c6f0e91483cc03b.md @@ -1,6 +1,6 @@ --- id: 657dd5864c6f0e91483cc03b -title: Task 119 +title: Tarea 119 challengeType: 19 dashedName: task-119 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md index 418e21789b..59a2d7837b 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md @@ -1,6 +1,6 @@ --- id: 657ddcd61f516cacdc7a04ca -title: Task 124 +title: Tarea 124 challengeType: 19 dashedName: task-124 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656abd3412f31c4c2483de5c.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656abd3412f31c4c2483de5c.md index fb6bb65781..c5f7a29c65 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656abd3412f31c4c2483de5c.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656abd3412f31c4c2483de5c.md @@ -1,6 +1,6 @@ --- id: 656abd3412f31c4c2483de5c -title: Task 80 +title: Tarea 80 challengeType: 19 dashedName: task-80 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656ccd8bafe46d138451d176.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656ccd8bafe46d138451d176.md index 5ee8797287..5f3ab8f11f 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656ccd8bafe46d138451d176.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656ccd8bafe46d138451d176.md @@ -1,6 +1,6 @@ --- id: 656ccd8bafe46d138451d176 -title: Task 111 +title: Tarea 111 challengeType: 22 dashedName: task-111 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656d2bc10f29b413d1a843d5.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656d2bc10f29b413d1a843d5.md index e98adf9da2..b8be7895de 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656d2bc10f29b413d1a843d5.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656d2bc10f29b413d1a843d5.md @@ -1,6 +1,6 @@ --- id: 656d2bc10f29b413d1a843d5 -title: Task 161 +title: Tarea 161 challengeType: 19 dashedName: task-161 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/657bcf58b87d01890f9bdc93.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/657bcf58b87d01890f9bdc93.md index 3e9feb5e60..a80ad65b8d 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/657bcf58b87d01890f9bdc93.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/657bcf58b87d01890f9bdc93.md @@ -1,6 +1,6 @@ --- id: 657bcf58b87d01890f9bdc93 -title: Task 28 +title: Tarea 28 challengeType: 19 dashedName: task-28 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md index 60eb2d6700..9441128d65 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -1,6 +1,6 @@ --- id: 657b2e0666d4a9d1b851f90e -title: Task 79 +title: Tarea 79 challengeType: 19 dashedName: task-79 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f31898ad2ed9c3b1a4c9b3.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f31898ad2ed9c3b1a4c9b3.md index 5bf8e78be2..53465eaf87 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f31898ad2ed9c3b1a4c9b3.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f31898ad2ed9c3b1a4c9b3.md @@ -1,6 +1,6 @@ --- id: 65f31898ad2ed9c3b1a4c9b3 -title: Task 40 +title: Tarea 40 challengeType: 22 dashedName: task-40 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a19e8b77c4170ed0704d.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a19e8b77c4170ed0704d.md index 9226e1cd4e..1e31ec08a7 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a19e8b77c4170ed0704d.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a19e8b77c4170ed0704d.md @@ -1,6 +1,6 @@ --- id: 65f3a19e8b77c4170ed0704d -title: Task 57 +title: Tarea 57 challengeType: 19 dashedName: task-57 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f4264c34d9b678ecd79ad3.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f4264c34d9b678ecd79ad3.md index 694dbe4365..c444a9b86f 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f4264c34d9b678ecd79ad3.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f4264c34d9b678ecd79ad3.md @@ -1,6 +1,6 @@ --- id: 65f4264c34d9b678ecd79ad3 -title: Task 3 +title: Tarea 3 challengeType: 22 dashedName: task-3 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/663c90e831be4c127bb11d35.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/663c90e831be4c127bb11d35.md index 190e32f0ae..44ec87d53a 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/663c90e831be4c127bb11d35.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/663c90e831be4c127bb11d35.md @@ -1,6 +1,6 @@ --- id: 663c90e831be4c127bb11d35 -title: Task 47 +title: Tarea 47 challengeType: 22 dashedName: task-47 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/663cdd506fb3896b73b1cd13.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/663cdd506fb3896b73b1cd13.md index ffc1976478..5532fd01a5 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/663cdd506fb3896b73b1cd13.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/663cdd506fb3896b73b1cd13.md @@ -1,6 +1,6 @@ --- id: 663cdd506fb3896b73b1cd13 -title: Task 53 +title: Tarea 53 challengeType: 19 dashedName: task-53 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66429658abee9b75dea25871.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66429658abee9b75dea25871.md index bce065f9c3..e01370e9da 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66429658abee9b75dea25871.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66429658abee9b75dea25871.md @@ -1,6 +1,6 @@ --- id: 66429658abee9b75dea25871 -title: Task 81 +title: Tarea 81 challengeType: 22 dashedName: task-81 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664299c450949978bda86771.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664299c450949978bda86771.md index e330ccda46..07619d44d5 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664299c450949978bda86771.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664299c450949978bda86771.md @@ -1,6 +1,6 @@ --- id: 664299c450949978bda86771 -title: Task 83 +title: Tarea 83 challengeType: 22 dashedName: task-83 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a45d4f36ea1448aa359d2.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a45d4f36ea1448aa359d2.md index 0fefb30210..b7cca51646 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a45d4f36ea1448aa359d2.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a45d4f36ea1448aa359d2.md @@ -1,6 +1,6 @@ --- id: 656a45d4f36ea1448aa359d2 -title: Task 36 +title: Tarea 36 challengeType: 22 dashedName: task-36 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4e001d2b804cdea7000a.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4e001d2b804cdea7000a.md index 596e941c56..288f71f780 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4e001d2b804cdea7000a.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4e001d2b804cdea7000a.md @@ -1,6 +1,6 @@ --- id: 656a4e001d2b804cdea7000a -title: Task 56 +title: Tarea 56 challengeType: 19 dashedName: task-56 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661811bce448257e10e8e1e9.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661811bce448257e10e8e1e9.md index 556bc3aad1..371ce8fcab 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661811bce448257e10e8e1e9.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661811bce448257e10e8e1e9.md @@ -1,6 +1,6 @@ --- id: 661811bce448257e10e8e1e9 -title: Task 18 +title: Tarea 18 challengeType: 22 dashedName: task-18 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661bdbcf1d85c329ce8ef7b1.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661bdbcf1d85c329ce8ef7b1.md index 771b57495c..a9d18073e1 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661bdbcf1d85c329ce8ef7b1.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661bdbcf1d85c329ce8ef7b1.md @@ -1,6 +1,6 @@ --- id: 661bdbcf1d85c329ce8ef7b1 -title: Task 71 +title: Tarea 71 challengeType: 19 dashedName: task-71 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661bdcc98f5d9b2ab8d2ec69.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661bdcc98f5d9b2ab8d2ec69.md index de0352772e..dc1f8a003f 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661bdcc98f5d9b2ab8d2ec69.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661bdcc98f5d9b2ab8d2ec69.md @@ -1,6 +1,6 @@ --- id: 661bdcc98f5d9b2ab8d2ec69 -title: Task 72 +title: Tarea 72 challengeType: 22 dashedName: task-72 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ec0de154fc223f87a3e44.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ec0de154fc223f87a3e44.md index f490dd93b2..aa6efe80ed 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ec0de154fc223f87a3e44.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ec0de154fc223f87a3e44.md @@ -1,6 +1,6 @@ --- id: 661ec0de154fc223f87a3e44 -title: Task 81 +title: Tarea 81 challengeType: 22 dashedName: task-81 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ec6f5966e9027ab9756dc.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ec6f5966e9027ab9756dc.md index ad1d25f9de..7b33b7354b 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ec6f5966e9027ab9756dc.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ec6f5966e9027ab9756dc.md @@ -1,6 +1,6 @@ --- id: 661ec6f5966e9027ab9756dc -title: Task 85 +title: Tarea 85 challengeType: 19 dashedName: task-85 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed71bed334e6bac73cac5.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed71bed334e6bac73cac5.md index 69ebede75f..45bc34ec50 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed71bed334e6bac73cac5.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed71bed334e6bac73cac5.md @@ -1,6 +1,6 @@ --- id: 661ed71bed334e6bac73cac5 -title: Task 89 +title: Tarea 89 challengeType: 19 dashedName: task-89 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee943945b22763d8ef29a.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee943945b22763d8ef29a.md index c0fa9a97d9..efa4198e5f 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee943945b22763d8ef29a.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee943945b22763d8ef29a.md @@ -1,6 +1,6 @@ --- id: 661ee943945b22763d8ef29a -title: Task 96 +title: Tarea 96 challengeType: 19 dashedName: task-96 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eec2eeb773977fecc123d.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eec2eeb773977fecc123d.md index 0c0941959b..efd9895f94 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eec2eeb773977fecc123d.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eec2eeb773977fecc123d.md @@ -1,6 +1,6 @@ --- id: 661eec2eeb773977fecc123d -title: Task 98 +title: Tarea 98 challengeType: 22 dashedName: task-98 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22c705b53e41be902b63b.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22c705b53e41be902b63b.md index bea8fb7fd0..cf8e428bc4 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22c705b53e41be902b63b.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22c705b53e41be902b63b.md @@ -1,6 +1,6 @@ --- id: 65b22c705b53e41be902b63b -title: Task 3 +title: Tarea 3 challengeType: 19 dashedName: task-3 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d6cc2551fe584833cd6cda.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d6cc2551fe584833cd6cda.md index 3dd9d8ccc5..ca0884f173 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d6cc2551fe584833cd6cda.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d6cc2551fe584833cd6cda.md @@ -1,6 +1,6 @@ --- id: 65d6cc2551fe584833cd6cda -title: Task 52 +title: Tarea 52 challengeType: 19 dashedName: task-52 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d867969a26ebf43e31297d.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d867969a26ebf43e31297d.md index e763d18bb0..add3699f3d 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d867969a26ebf43e31297d.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d867969a26ebf43e31297d.md @@ -1,6 +1,6 @@ --- id: 65d867969a26ebf43e31297d -title: Task 65 +title: Tarea 65 challengeType: 22 dashedName: task-65 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d869b6f586e1f9a02aa19b.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d869b6f586e1f9a02aa19b.md index 92ca5cf0df..ec8a32a53b 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d869b6f586e1f9a02aa19b.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d869b6f586e1f9a02aa19b.md @@ -1,6 +1,6 @@ --- id: 65d869b6f586e1f9a02aa19b -title: Task 67 +title: Tarea 67 challengeType: 19 dashedName: task-67 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d8713fd64b650c269676cd.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d8713fd64b650c269676cd.md index 4bea1e16b1..38c1c2b586 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d8713fd64b650c269676cd.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d8713fd64b650c269676cd.md @@ -1,6 +1,6 @@ --- id: 65d8713fd64b650c269676cd -title: Task 76 +title: Tarea 76 challengeType: 22 dashedName: task-76 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md index dbe75f0260..d6dbb067a2 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md @@ -1,6 +1,6 @@ --- id: 65d89562dff69551e7683df3 -title: Task 82 +title: Tarea 82 challengeType: 22 dashedName: task-82 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638a290bc4a5458dd6ebf07.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638a290bc4a5458dd6ebf07.md index 5eabf7d95c..53f5eca617 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638a290bc4a5458dd6ebf07.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638a290bc4a5458dd6ebf07.md @@ -1,6 +1,6 @@ --- id: 6638a290bc4a5458dd6ebf07 -title: Task 47 +title: Tarea 47 challengeType: 22 dashedName: task-47 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638a7713695f25abd3f3c02.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638a7713695f25abd3f3c02.md index df2f3b8d3d..9f80da95d7 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638a7713695f25abd3f3c02.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638a7713695f25abd3f3c02.md @@ -1,6 +1,6 @@ --- id: 6638a7713695f25abd3f3c02 -title: Task 49 +title: Tarea 49 challengeType: 22 dashedName: task-49 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a52d92a586612be333b16.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a52d92a586612be333b16.md index 0771a37eeb..4338a03d87 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a52d92a586612be333b16.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a52d92a586612be333b16.md @@ -1,6 +1,6 @@ --- id: 655a52d92a586612be333b16 -title: Task 57 +title: Tarea 57 challengeType: 22 dashedName: task-57 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a55068842f6143a7bcc46.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a55068842f6143a7bcc46.md index 57743e10bf..0f1c607235 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a55068842f6143a7bcc46.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a55068842f6143a7bcc46.md @@ -1,6 +1,6 @@ --- id: 655a55068842f6143a7bcc46 -title: Task 59 +title: Tarea 59 challengeType: 22 dashedName: task-59 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md index 10b888ff85..2a320ba029 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md @@ -1,6 +1,6 @@ --- id: 655a79e595bd202b4cd5e2d2 -title: Task 65 +title: Tarea 65 challengeType: 22 dashedName: task-65 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8d7c939fcf37604516e4.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8d7c939fcf37604516e4.md index d41345f2f4..247273a061 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8d7c939fcf37604516e4.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8d7c939fcf37604516e4.md @@ -1,6 +1,6 @@ --- id: 655a8d7c939fcf37604516e4 -title: Task 73 +title: Tarea 73 challengeType: 22 dashedName: task-73 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b283d10fee46040e0a893.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b283d10fee46040e0a893.md index 6bb3889bc8..a7a36e902e 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b283d10fee46040e0a893.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b283d10fee46040e0a893.md @@ -1,6 +1,6 @@ --- id: 655b283d10fee46040e0a893 -title: Task 82 +title: Tarea 82 challengeType: 19 dashedName: task-82 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e865a63c108a2f651b58c4.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e865a63c108a2f651b58c4.md index 50528cc8a9..19bce4bd20 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e865a63c108a2f651b58c4.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e865a63c108a2f651b58c4.md @@ -1,6 +1,6 @@ --- id: 65e865a63c108a2f651b58c4 -title: Task 19 +title: Tarea 19 challengeType: 22 dashedName: task-19 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md index cc9cdd7d27..1d6230c3cd 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md @@ -1,6 +1,6 @@ --- id: 6617aea9ccdd68f7088368d1 -title: Task 18 +title: Tarea 18 challengeType: 19 dashedName: task-18 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a35c7b9d642f478d6cabba.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a35c7b9d642f478d6cabba.md index bfe33e230c..1043b910fa 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a35c7b9d642f478d6cabba.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a35c7b9d642f478d6cabba.md @@ -1,6 +1,6 @@ --- id: 65a35c7b9d642f478d6cabba -title: Task 77 +title: Tarea 77 challengeType: 22 dashedName: task-77 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a502f63b185addb3117797.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a502f63b185addb3117797.md index 6dcd68d3ae..75341a4c3e 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a502f63b185addb3117797.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a502f63b185addb3117797.md @@ -1,6 +1,6 @@ --- id: 65a502f63b185addb3117797 -title: Task 102 +title: Tarea 102 challengeType: 22 dashedName: task-102 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a50874fd56ceeb9d8a271f.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a50874fd56ceeb9d8a271f.md index b4a9b4f5f4..ca7a2007a7 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a50874fd56ceeb9d8a271f.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a50874fd56ceeb9d8a271f.md @@ -1,6 +1,6 @@ --- id: 65a50874fd56ceeb9d8a271f -title: Task 110 +title: Tarea 110 challengeType: 22 dashedName: task-110 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a74dae1b3acd9fad3a068e.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a74dae1b3acd9fad3a068e.md index 71c754ff31..fb2a30971c 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a74dae1b3acd9fad3a068e.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a74dae1b3acd9fad3a068e.md @@ -1,6 +1,6 @@ --- id: 65a74dae1b3acd9fad3a068e -title: Task 128 +title: Tarea 128 challengeType: 22 dashedName: task-128 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md index a5bbef4e68..93fb9a5fc5 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md @@ -1,6 +1,6 @@ --- id: 65b28bbe803df52c4e76dd15 -title: Task 43 +title: Tarea 43 challengeType: 22 dashedName: task-43 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bd42ca24dd3ede91aa41.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bd42ca24dd3ede91aa41.md index 7035ad1a50..6ae79e7866 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bd42ca24dd3ede91aa41.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bd42ca24dd3ede91aa41.md @@ -1,6 +1,6 @@ --- id: 65b2bd42ca24dd3ede91aa41 -title: Task 61 +title: Tarea 61 challengeType: 22 dashedName: task-61 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622372ee4a646767edcbfde.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622372ee4a646767edcbfde.md index 6adb77c939..61fffaed97 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622372ee4a646767edcbfde.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622372ee4a646767edcbfde.md @@ -1,6 +1,6 @@ --- id: 6622372ee4a646767edcbfde -title: Task 47 +title: Tarea 47 challengeType: 22 dashedName: task-47 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-provide-explanations-when-helping-others/66262b91a2380f2a02d20e94.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-provide-explanations-when-helping-others/66262b91a2380f2a02d20e94.md index 81b01b4b04..2095bc9acf 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-provide-explanations-when-helping-others/66262b91a2380f2a02d20e94.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-provide-explanations-when-helping-others/66262b91a2380f2a02d20e94.md @@ -1,6 +1,6 @@ --- id: 66262b91a2380f2a02d20e94 -title: Task 8 +title: Tarea 8 challengeType: 19 dashedName: task-8 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-provide-explanations-when-helping-others/66265f07ee69a670cc620d1e.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-provide-explanations-when-helping-others/66265f07ee69a670cc620d1e.md index 76d31e7cf3..b66818236b 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-provide-explanations-when-helping-others/66265f07ee69a670cc620d1e.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-provide-explanations-when-helping-others/66265f07ee69a670cc620d1e.md @@ -1,6 +1,6 @@ --- id: 66265f07ee69a670cc620d1e -title: Task 38 +title: Tarea 38 challengeType: 22 dashedName: task-38 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/66000f74c71b623407a8394e.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/66000f74c71b623407a8394e.md index 567523515e..08b8b4a473 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/66000f74c71b623407a8394e.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/66000f74c71b623407a8394e.md @@ -1,6 +1,6 @@ --- id: 66000f74c71b623407a8394e -title: Task 18 +title: Tarea 18 challengeType: 19 dashedName: task-18 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/662511992b96e5344c2ff040.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/662511992b96e5344c2ff040.md index f13ecc07da..e357d6a4f9 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/662511992b96e5344c2ff040.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/662511992b96e5344c2ff040.md @@ -1,6 +1,6 @@ --- id: 662511992b96e5344c2ff040 -title: Task 3 +title: Tarea 3 challengeType: 22 dashedName: task-3 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/6625e02aa797a497b69d2c55.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/6625e02aa797a497b69d2c55.md index e0c87b4d27..1d73193a17 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/6625e02aa797a497b69d2c55.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/6625e02aa797a497b69d2c55.md @@ -1,6 +1,6 @@ --- id: 6625e02aa797a497b69d2c55 -title: Task 61 +title: Tarea 61 challengeType: 22 dashedName: task-61 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66127850c4415c3df1b4e99a.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66127850c4415c3df1b4e99a.md index 457484af9d..d66e518149 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66127850c4415c3df1b4e99a.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66127850c4415c3df1b4e99a.md @@ -1,6 +1,6 @@ --- id: 66127850c4415c3df1b4e99a -title: Task 37 +title: Tarea 37 challengeType: 22 dashedName: task-37 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md index bfd75f1dcb..6e6dcf5842 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md @@ -1,6 +1,6 @@ --- id: 6579ddc94db61d2463022da3 -title: Task 38 +title: Tarea 38 challengeType: 19 dashedName: task-38 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1a573140a49f09e30f6e.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1a573140a49f09e30f6e.md index 71fa86c827..f7cc0b4a73 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1a573140a49f09e30f6e.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1a573140a49f09e30f6e.md @@ -1,6 +1,6 @@ --- id: 657e1a573140a49f09e30f6e -title: Task 19 +title: Tarea 19 challengeType: 19 dashedName: task-19 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e449348a16b62e1f8cac6.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e449348a16b62e1f8cac6.md index d92f7efded..aa4ff8c808 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e449348a16b62e1f8cac6.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e449348a16b62e1f8cac6.md @@ -1,6 +1,6 @@ --- id: 657e449348a16b62e1f8cac6 -title: Task 61 +title: Tarea 61 challengeType: 19 dashedName: task-61 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md index 828885fedd..fb5db89a5e 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md @@ -1,6 +1,6 @@ --- id: 657e5c296bdba2ea26c67ca0 -title: Task 97 +title: Tarea 97 challengeType: 19 dashedName: task-97 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md index e67c513fb1..56c3ebc468 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md @@ -1,6 +1,6 @@ --- id: 657e5d8f7f2274f2b1a8efcc -title: Task 100 +title: Tarea 100 challengeType: 19 dashedName: task-100 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e74a56fc5b6648a8140e5.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e74a56fc5b6648a8140e5.md index 7e227d2737..db25a148c2 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e74a56fc5b6648a8140e5.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e74a56fc5b6648a8140e5.md @@ -1,6 +1,6 @@ --- id: 657e74a56fc5b6648a8140e5 -title: Task 125 +title: Tarea 125 challengeType: 19 dashedName: task-125 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fb665a39478e642f5a139.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fb665a39478e642f5a139.md index b9ced3d2a1..7b83e8079a 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fb665a39478e642f5a139.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fb665a39478e642f5a139.md @@ -1,6 +1,6 @@ --- id: 657fb665a39478e642f5a139 -title: Task 67 +title: Tarea 67 challengeType: 19 dashedName: task-67 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fbc85c25a16eac8356182.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fbc85c25a16eac8356182.md index 289f960760..c51c0867a3 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fbc85c25a16eac8356182.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fbc85c25a16eac8356182.md @@ -1,6 +1,6 @@ --- id: 657fbc85c25a16eac8356182 -title: Task 72 +title: Tarea 72 challengeType: 19 dashedName: task-72 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fbde9a43e35ec1ebafe56.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fbde9a43e35ec1ebafe56.md index e81e831c48..cd458749e0 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fbde9a43e35ec1ebafe56.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fbde9a43e35ec1ebafe56.md @@ -1,6 +1,6 @@ --- id: 657fbde9a43e35ec1ebafe56 -title: Task 75 +title: Tarea 75 challengeType: 19 dashedName: task-75 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662efc55d552e72591518e31.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662efc55d552e72591518e31.md index d07abf7b27..7ca9ae4f96 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662efc55d552e72591518e31.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662efc55d552e72591518e31.md @@ -1,6 +1,6 @@ --- id: 662efc55d552e72591518e31 -title: Task 42 +title: Tarea 42 challengeType: 19 dashedName: task-42 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3815b0798f3ae730a888.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3815b0798f3ae730a888.md index dceda82c3a..3f2df8cd70 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3815b0798f3ae730a888.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3815b0798f3ae730a888.md @@ -1,6 +1,6 @@ --- id: 662f3815b0798f3ae730a888 -title: Task 71 +title: Tarea 71 challengeType: 22 dashedName: task-71 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f69e2ea29ba3fd64e66e0.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f69e2ea29ba3fd64e66e0.md index 37f2077237..d37ea89e05 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f69e2ea29ba3fd64e66e0.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f69e2ea29ba3fd64e66e0.md @@ -1,6 +1,6 @@ --- id: 662f69e2ea29ba3fd64e66e0 -title: Task 78 +title: Tarea 78 challengeType: 19 dashedName: task-78 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-code-related-concepts-and-terms/663350023c7cb898358af702.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-code-related-concepts-and-terms/663350023c7cb898358af702.md index 2f4ab33827..748c182407 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-code-related-concepts-and-terms/663350023c7cb898358af702.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-use-code-related-concepts-and-terms/663350023c7cb898358af702.md @@ -1,6 +1,6 @@ --- id: 663350023c7cb898358af702 -title: Task 36 +title: Tarea 36 challengeType: 22 dashedName: task-36 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca33bb1f197812c1a358b.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca33bb1f197812c1a358b.md index bf342dba7f..e28aac071f 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca33bb1f197812c1a358b.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca33bb1f197812c1a358b.md @@ -1,6 +1,6 @@ --- id: 657ca33bb1f197812c1a358b -title: Task 26 +title: Tarea 26 challengeType: 19 dashedName: task-26 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce2aee8f1d30e17cf89e5.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce2aee8f1d30e17cf89e5.md index eea689f1c2..fb1f06ba77 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce2aee8f1d30e17cf89e5.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce2aee8f1d30e17cf89e5.md @@ -1,6 +1,6 @@ --- id: 657ce2aee8f1d30e17cf89e5 -title: Task 57 +title: Tarea 57 challengeType: 19 dashedName: task-57 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e3dc46c5a816f0b12fb76.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e3dc46c5a816f0b12fb76.md index 21a4da6624..4a1dd003a7 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e3dc46c5a816f0b12fb76.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e3dc46c5a816f0b12fb76.md @@ -1,6 +1,6 @@ --- id: 657e3dc46c5a816f0b12fb76 -title: Task 78 +title: Tarea 78 challengeType: 22 dashedName: task-78 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md index 57cb2df43b..121baaaf8a 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md @@ -1,6 +1,6 @@ --- id: 657e4b7d381d567e8d97967c -title: Task 88 +title: Tarea 88 challengeType: 22 dashedName: task-88 --- diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md index 2942122d17..a3b826d3d6 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md @@ -1,6 +1,6 @@ --- id: 657e54f51fe1c983d840cb70 -title: Task 99 +title: Tarea 99 challengeType: 19 dashedName: task-99 --- diff --git a/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/element-wise-operations.md b/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/element-wise-operations.md index 8f4b6d005a..b83ee4d379 100644 --- a/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/element-wise-operations.md +++ b/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/element-wise-operations.md @@ -13,11 +13,11 @@ Implement basic element-wise matrix-matrix and scalar-matrix operations. **Implement:**
2223
is a Kaprekar number, as 2223 * 2223 = 4941729
, 4941729
may be split to 494
and 1729
, and 494 + 1729 = 2223
2223
es un número Kaprekar, como 2223 * 2223 = 4941729
, 4941729
puede dividirse en 494
y 1729
, y 494 + 1729 = 2223
1, 9, 45, 55, ...
route_path: '/user/:userId/book/:bookId'diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md index 1f8310c4e6..71fe317dd2 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md +++ b/curriculum/challenges/german/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. -Ändere für jede Klasse den `width`-Wert auf `49%`, um zu sehen, was passiert. +One way to fix this is to make each `p` element's width a little less than `50%`. Ändere für jede Klasse den `width`-Wert auf `49%`, um zu sehen, was passiert. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md index 9c460caa45..6182507d4d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -1,31 +1,31 @@ --- id: 646c5ffef5598d449b52ec12 -title: Step 19 +title: Schritt 19 challengeType: 0 dashedName: step-19 --- # --description-- -Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear. +Jetzt solltest du die Katzenohren bearbeiten. Es wird ein rechtes und linkes Ohr geben, und in jedem wird sich ein Innenohr befinden. -Inside your `.cat-head` element, create a `div` element with the class `cat-ears`. +Erstelle innerhalb deines `.cat-head`-Elements, ein `div`-Element mit der Klasse `cat-ears`. # --hints-- -You should not change the existing `div` element with the class `cat-head`. +Du solltest dein vorhandenes `div`-Element nicht mit der Klasse `cat-head` verändern. ```js assert(document.querySelectorAll('div.cat-head').length === 1); ``` -You should create one `div` element inside your `.cat-head` element. +Du solltest ein `div`-Element innerhalb deines `.cat-head`-Elements erstellen. ```js assert(document.querySelectorAll('.cat-head div').length === 1); ``` -Your `div` element should have the class `cat-ears`. +Dein `div`-Element sollte die Klasse `cat-ears` haben. ```js assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md index 803b892155..364781a22e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -1,6 +1,6 @@ --- id: 646ce9d790d2a44de5f99e04 -title: Step 21 +title: Schritt 21 challengeType: 0 dashedName: step-21 --- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md index 6b2da89bc1..cab16748fd 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md @@ -7,7 +7,7 @@ dashedName: step-56 # --description-- -Remove the sharp edges of the nose with border radius of `50%` each on the top-left, bottom-right, and bottom-left corners. Also, rotate it at 180 degrees. +Entferne die scharfen Kanten der Nase mit einem Randradius von jeweils `50%` an der oberen linken, der unteren rechten und der unteren linken Ecke. Drehe sie außerdem um 180 Grad. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md index 6e28a86659..58193fb1a2 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md @@ -1,35 +1,35 @@ --- id: 646f0ef13604420a8744f7d4 -title: Step 66 +title: Schritt 66 challengeType: 0 dashedName: step-66 --- # --description-- -Inside the `.cat-whiskers` element, create two `div` elements with the class `cat-whiskers-left` and `cat-whiskers-right`. +Erstelle innerhalb des `.cat-whiskers`-Elements zwei `div`-Elemente mit der Klasse `cat-whiskers-left` und `cat-whiskers-right`. # --hints-- -You should not change the existing `div` element with the class `cat-whiskers` +Du solltest dein vorhandenes `div`-Element mit der Klasse `cat-whiskers` nicht verändern. ```js assert(document.querySelectorAll('div.cat-whiskers').length === 1) ``` -You should have two `div` elements inside the `.cat-whiskers` element. +Du solltest zwei `div`-Elemente innerhalb des `.cat-whiskers`-Elements haben. ```js assert(document.querySelectorAll('.cat-whiskers div').length === 2) ``` -The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`. +Das erste `div`-Element innerhalb des `.cat-whiskers`-Elements sollte die Klasse `cat-whiskers-left` haben. ```js assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left')) ``` -The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`. +Das zweite `div`-Element innerhalb des `.cat-whiskers`-Elements sollte die Klasse `cat-whiskers-right` haben. ```js assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right')) diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md index 741c609e6b..392ec1fddc 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md @@ -1,35 +1,35 @@ --- id: 646f107abb89d00bb99f387a -title: Step 69 +title: Schritt 69 challengeType: 0 dashedName: step-69 --- # --description-- -Use a descendant selector to target the three `div` elements inside your `.cat-whiskers-left` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. +Verwende einen Nachfahren-Selektor, um die drei `div`-Elemente innerhalb deines `.cat-whiskers-left`-Elements auszuwählen. Gib ihm eine `width` von `40px`, eine `height` von `1px` und die `background-color` `#000`. # --hints-- -You should have a `.cat-whiskers-left div` selector. +Du solltest einen `.cat-whiskers-left div`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')) ``` -Your `.cat-whiskers-left div` selector should have a `width` set to `40px`. +Dein `.cat-whiskers-left div`-Selektor sollte eine `width` von `40px` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.width === '40px') ``` -Your `.cat-whiskers-left div` selector should have a `height` set to `1px`. +Dein `.cat-whiskers-left div`-Selektor sollte eine `height` von `1px` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.height === '1px') ``` -Your `.cat-whiskers-left div` selector should have a `background-color` set to `#000`. +Dein `.cat-whiskers-left div`-Selektor sollte die `background-color` auf `#000` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.backgroundColor === 'rgb(0, 0, 0)') diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md index 3d65336921..b620fae214 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md @@ -7,18 +7,18 @@ dashedName: step-4 # --description-- -Use the universal selector to add `box-sizing: border-box;` to your CSS. This ensures elements include padding and border in their specified width and height. +Verwende den Universalselektor, um deinem CSS `box-sizing: border-box;` hinzuzufügen. Dadurch wird sichergestellt, dass Elemente Padding und einen Rand in ihrer angegebenen Breite und Höhe enthalten. # --hints-- -You should have the universal selector (`*`). +Du solltest den Universalselektor (`*`) haben. ```js // assert.match(code, /\*\s*{\s*.*\s*}/) assert(new __helpers.CSSHelp(document).getStyle('*')) ``` -Your universal selector should have a `box-sizing` property set to `border-box`. +Dein Universalselektor sollte eine `box-sizing`-Eigenschaft auf `border-box` gesetzt haben. ```js // assert.match(code, /\*\s*{\s*box-sizing:\s*border-box;?\s*}/) diff --git a/curriculum/challenges/german/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/german/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index f7a4b08e1c..9e1a3d3e81 100644 --- a/curriculum/challenges/german/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/curriculum/challenges/german/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-- diff --git a/curriculum/challenges/german/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/german/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md index 38d462e02f..f96930b45c 100644 --- a/curriculum/challenges/german/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md +++ b/curriculum/challenges/german/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-- diff --git a/curriculum/challenges/german/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md b/curriculum/challenges/german/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md index c43145b52e..c9104ab320 100644 --- a/curriculum/challenges/german/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md +++ b/curriculum/challenges/german/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-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md index 4eb937dfeb..12b633cc3a 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md +++ b/curriculum/challenges/italian/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. -Cambia il valore di `width` in `49%` per ogni classe per vedere cosa accade. +One way to fix this is to make each `p` element's width a little less than `50%`. Cambia il valore di `width` in `49%` per ogni classe per vedere cosa accade. # --hints-- diff --git a/curriculum/challenges/italian/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/italian/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index f7a4b08e1c..9e1a3d3e81 100644 --- a/curriculum/challenges/italian/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/curriculum/challenges/italian/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-- diff --git a/curriculum/challenges/italian/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/italian/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md index 38d462e02f..f96930b45c 100644 --- a/curriculum/challenges/italian/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md +++ b/curriculum/challenges/italian/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-- diff --git a/curriculum/challenges/italian/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md b/curriculum/challenges/italian/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md index c43145b52e..c9104ab320 100644 --- a/curriculum/challenges/italian/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md +++ b/curriculum/challenges/italian/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-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md index 7d0d58f63f..cd2963dd7b 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md @@ -7,9 +7,9 @@ dashedName: step-39 # --description-- -うまくいきませんでしたね。 `p` 要素に `inline-block` のスタイルを適用してコードの中の別々の行に置くと、最初の `p` 要素の右側に余分なスペースが作成され、それによって 2 つ目の要素が次の行に移動してしまいます。 これを直す方法は、各 `p` 要素の幅を `50%` より少し小さくすることです。 +うまくいきませんでしたね。 `p` 要素に `inline-block` のスタイルを適用してコードの中の別々の行に置くと、最初の `p` 要素の右側に余分なスペースが作成され、それによって 2 つ目の要素が次の行に移動してしまいます。 White space characters can cause this issue as well. -各クラスの `width` の値を `49%` に変更して動作を確認してください。 +これを直す方法は、各 `p` 要素の幅を `50%` より少し小さくすることです。 各クラスの `width` の値を `49%` に変更して動作を確認してください。 # --hints-- diff --git a/curriculum/challenges/japanese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/japanese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index f7a4b08e1c..9e1a3d3e81 100644 --- a/curriculum/challenges/japanese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/curriculum/challenges/japanese/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-- diff --git a/curriculum/challenges/japanese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/japanese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md index 38d462e02f..f96930b45c 100644 --- a/curriculum/challenges/japanese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md +++ b/curriculum/challenges/japanese/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-- diff --git a/curriculum/challenges/japanese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md b/curriculum/challenges/japanese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md index c43145b52e..c9104ab320 100644 --- a/curriculum/challenges/japanese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md +++ b/curriculum/challenges/japanese/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-- diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md index fb48396369..d2e1fda294 100644 --- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md +++ b/curriculum/challenges/korean/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. -Change the `width` value to `49%` for each class to see what happens. +One way to fix this is to make each `p` element's width a little less than `50%`. Change the `width` value to `49%` for each class to see what happens. # --hints-- diff --git a/curriculum/challenges/korean/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/korean/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index f7a4b08e1c..9e1a3d3e81 100644 --- a/curriculum/challenges/korean/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/curriculum/challenges/korean/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-- diff --git a/curriculum/challenges/korean/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/korean/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md index 38d462e02f..f96930b45c 100644 --- a/curriculum/challenges/korean/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md +++ b/curriculum/challenges/korean/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-- diff --git a/curriculum/challenges/korean/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md b/curriculum/challenges/korean/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md index c43145b52e..c9104ab320 100644 --- a/curriculum/challenges/korean/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md +++ b/curriculum/challenges/korean/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-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md index 93b96492da..2bed9a0208 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md +++ b/curriculum/challenges/portuguese/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. -Altere a `width` de cada classe para `49%` e veja o que acontece. +One way to fix this is to make each `p` element's width a little less than `50%`. Altere a `width` de cada classe para `49%` e veja o que acontece. # --hints-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/portuguese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index f7a4b08e1c..9e1a3d3e81 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/curriculum/challenges/portuguese/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-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/portuguese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md index 38d462e02f..f96930b45c 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md +++ b/curriculum/challenges/portuguese/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-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md b/curriculum/challenges/portuguese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md index c43145b52e..c9104ab320 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md +++ b/curriculum/challenges/portuguese/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-- diff --git a/curriculum/dictionaries/espanol/comments.json b/curriculum/dictionaries/espanol/comments.json index c40c1db967..4c41cff011 100644 --- a/curriculum/dictionaries/espanol/comments.json +++ b/curriculum/dictionaries/espanol/comments.json @@ -109,5 +109,5 @@ "fho5t5": "Cuando abres una nueva pestaña al final", "00kcrm": "produce true", "sxpg2a": "Tu casilla de correo, drive y otros sitios de trabajo", - "n4f332": "TODO: use a different type of loop" + "n4f332": "TODO: Usa un tipo diferente de bucle" }
actual_request_URL: '/user/546/book/6754'
req.params: {userId: '546', bookId: '6754'}