diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 1d6c7b5301a..f4f7be8e401 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 تعني الخاصية _SVG_ المفيدة (رُسُوم متجهة قابلة للتطوير scalable vector graphics)، هي أنها تحتوي على سمة `path` التي تسمح بتغيير حجم الصورة دون التأثير على دقة الصورة الناتجة من التغيير. -حاليًا، تأخذ `img` حجمها الافتراضي, وهو كبير جدًا. بشكل صحيح، غيّر حجم الصورة باستخدام `id` كمنتقى، وعيّن `width` ألى `max(100px, 18vw)`. +حاليًا، تأخذ `img` حجمها الافتراضي, وهو كبير جدًا. CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -يجب عليك استخدام منتقي `#logo` لاستهداف عنصر `img`. +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -يجب عليك إعطاء `img` خاصية `width` بقيمة `max(100px, 18vw)`. +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index c1dc11d1481..b21bcde4262 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -استهدف عناصر الـ unordered list داخل عناصر `nav`، واستخدم _Flexbox_ لتوزيع المسافات بين الأطفال بشكل متساوٍ. +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index 4782f1d7974..dd46caaaf3f 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -ضمن عناصر `div.question-block`، ادمج عنصر `label` واحد ،وقم بإعطاء عناصر `label` محتوى نصي +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 177d7cd0155..adfd7f90d1b 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 _SVG_(可縮放矢量圖形)的一個有用之處是它包含一個 `path` 屬性,該屬性允許在不影響圖像分辨率的情況下縮放圖像。 -`img` 當前是默認尺寸,這個尺寸太大。 可以使用它的 `id` 作爲選擇器來縮放圖像,並將 `width` 設置爲 `max(100px, 18vw)`。 +`img` 當前是默認尺寸,這個尺寸太大。 CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -你應該使用 `#logo` 選擇器來定位 `img` 元素。 +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -你應該給 `img` 元素添加一個值爲 `max(100px, 18vw)` 的 `width`。 +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index b1e61b6c718..40cead61faf 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -定位 `nav` 元素中的無序列表元素,並使用 _Flexbox_ 均勻地間隔子元素。 +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index 0ed09eb528c..42c52533c74 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -在 `div.question-block` 元素中,嵌套一個 `label` 元素,並給 `label` 元素添加文本內容 +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints-- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 48a469ec9bb..0cd562ac8db 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 _SVG_(可缩放矢量图形)的一个有用之处是它包含一个 `path` 属性,该属性允许在不影响图像分辨率的情况下缩放图像。 -`img` 当前是默认尺寸,这个尺寸太大。 可以使用它的 `id` 作为选择器来缩放图像,并将 `width` 设置为 `max(100px, 18vw)`。 +`img` 当前是默认尺寸,这个尺寸太大。 CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -你应该使用 `#logo` 选择器来定位 `img` 元素。 +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -你应该给 `img` 元素添加一个值为 `max(100px, 18vw)` 的 `width`。 +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index bdcf94e5862..a0314de1ed2 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -定位 `nav` 元素中的无序列表元素,并使用 _Flexbox_ 均匀地间隔子元素。 +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index 60d0555732f..0d3af572408 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -在 `div.question-block` 元素中,嵌套一个 `label` 元素,并给 `label` 元素添加文本内容 +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index d6af389db0b..d44380cf0dd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 Una propiedad útil de un _SVG_ (gráficos vectoriales escalables) es que contiene un atributo `path` que permite escalar la imagen sin afectar la resolución de la imagen resultante. -Actualmente, el `img` está asumiendo el tamaño predeterminado, el cual es demasiado grande. De manera adecuada, escala la imagen usando el `id` como selector y establece el `width` a `max(100px, 18vw)`. +Actualmente, el `img` está asumiendo el tamaño predeterminado, el cual es demasiado grande. CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -Debes usar el selector `#logo` para apuntar al elemento `img`. +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -Debes dar al `img` un `width` de `max(100px, 18vw)`. +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index e385d24f93c..0ff91d9f7c2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -Apunta a los elementos de lista desordenada dentro de los elementos `nav`, y usa _Flexbox_ para espaciar de manera uniforme a los hijos. +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index 1579ff42926..5a0dfbf6c17 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -Dentro de los elementos `div.question-block`, anide un elemento `label` y dele contenido de texto. +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index d38ba19bcc5..d7cfe4d38c2 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 Eine nützliche Eigenschaft einer _SVG_ (scalable vector graphics, skalierbare Vektorgrafiken) ist, dass dieses ein `path`-Attribut enthält, mit welchem ein Bild, ohne die Auflösung des Resultats zu beeinflussen, skaliert werden kann. -Derzeit übernimmt das `img` die Ursprungsgröße, welche aber zu groß ist. Korrigiere das, indem du das Bild mithilfe des Selektors `id` auf eine `width` von `max(100px, 18vw)` stellst. +Derzeit übernimmt das `img` die Ursprungsgröße, welche aber zu groß ist. CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -Du solltest den Selektor `#logo` verwenden, um das `img`-Element auszuwählen. +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -Du solltest dem `img` eine `width` von `max(100px, 18vw)` geben. +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index c79623a763a..fbbb6cc544d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -Richte die ungeordneten Listenelemente innerhalb der `nav` Elemente aus und verwende _Flexbox_, um die untergeordneten Elemente gleichmäßig zu verteilen. +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index a30b81cf542..4697b12d13a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -Within the `div.question-block` elements, nest one `label` element, and give the `label` elements text content +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md index d7fbb07f097..f9804a0bb34 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md @@ -13,7 +13,7 @@ Verwende für die `border-left`-Sichteigenschaft die `rgba` Funktion, um den Far # --hints-- -Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double rgba(0, 0, 0, 0.75)`. +Deine `.sleeve`-CSS-Regel sollte eine `border-left`-Sichteigenschaft mit dem Wert `10px double rgba(0, 0, 0, 0.75)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md index e39458741d1..b6701c89efb 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md @@ -7,11 +7,11 @@ dashedName: step-38 # --description-- -To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string. +Um dem Pinguin-Körper ein Wappen zu geben, erstelle ein Pseudo-Element, dass das erste untergeordnete Element des `.penguin-body`-Elements ist. Die `content`-Eigenschaft des Pseudo-Elements sollte einen leeren String haben. # --hints-- -You should use the `.penguin-body::before` selector. +Du solltest den `.penguin-body::before`-Selektor verwenden. ```js assert.match(code, /\.penguin-body::before\s*\{/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md index 975b5c8af08..6de9574b6ca 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md @@ -17,14 +17,14 @@ Du solltest einen neuen Klassen-Selektor namens `bb1-window` erstellen. assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window')); ``` -You should move the `height` property and value from `.bb1a` to `.bb1-window`. +Du solltest die `height`-Eigenschaft und den Wert von `.bb1a` nach `.bb1-window` verschieben. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height); assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%'); ``` -You should move the `background` property and value from `.bb1a` to `.bb1-window`. +Du solltest die `background`-Eigenschaft und den Wert von `.bb1a` nach `.bb1-window` verschieben. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md index 7e7efb1fe89..f629731c0de 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md @@ -7,47 +7,47 @@ dashedName: step-42 # --description-- -Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them. +Füge die neue `bb1-window`-Klasse zu den `.bb1a`, `.bb1b` und `.bb1c`-Elementen hinzu. Dadurch wird der Farbverlauf auf sie angewendet. # --hints-- -You should not remove the `bb1a` class. +Du solltest die `bb1a`-Klasse nicht entfernen. ```js assert.exists(document.querySelector('div.bb1a')); ``` -You should add the `bb1-window` class to the `.bb1a` element. +Du solltest die `bb1-window`-Klasse zum `.bb1a`-Element hinzufügen. ```js assert.exists(document.querySelector('div.bb1a.bb1-window')); ``` -You should not remove the `bb1b` class. +Du solltest die `bb1b`-Klasse nicht entfernen. ```js assert.exists(document.querySelector('div.bb1b')); ``` -You should add the `bb1-window` class to the `.bb1b` element. +Du solltest die `bb1-window`-Klasse zum `.bb1b`-Element hinzufügen. ```js assert.exists(document.querySelector('div.bb1b.bb1-window')); ``` -You should not remove the `bb1c` class. +Du solltest die `bb1c`-Klasse nicht entfernen. ```js assert.exists(document.querySelector('div.bb1c')); ``` -You should add the `bb1-window` class to the `.bb1c` element. +Du solltest die `bb1-window` Klasse zum `.bb1c` Element hinzufügen. ```js assert.exists(document.querySelector('div.bb1c.bb1-window')); ``` -You should not change the `.bb1d` element. +Du solltest das `.bb1d`-Element nicht verändern. ```js assert.exists(document.querySelector('div.bb1d')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md index 9a3396d82f0..1b6908a0e47 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md @@ -7,7 +7,7 @@ dashedName: step-43 # --description-- -You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them. +Du brauchst die `height` oder `background-color`-Eigenschaften in `.bb1a`, `.bb1b` oder `.bb1c` nicht mehr, also fahr fort und entferne sie. # --hints-- @@ -17,25 +17,25 @@ You should remove the `background-color` from `.bb1a`. assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); ``` -You should remove the `height` property from `.bb1b`. +Du solltest die `height`-Eigenschaft aus `.bb1b` entfernen. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height); ``` -You should remove the `background-color` property from `.bb1b`. +Du solltest die `background-color`-Eigenschaft aus `.bb1b` entfernen. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor); ``` -You should remove the `height` property from `.bb1c`. +Du solltest die `height`-Eigenschaft aus `.bb1c` entfernen. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height); ``` -You should remove the `background-color` property from `.bb1c`. +Du solltest die `background-color`-Eigenschaft aus `.bb1c` entfernen. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md index 3fa46bfd549..9755d63323f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md @@ -17,11 +17,11 @@ gradient-type( ); ``` -Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. +Füge einen `linear-gradient` zu `.bb1d` mit `orange` als erste Farbe, `--building-color1` als zweite und `--window-color1` als dritte hinzu. Remember to use the gradient on the `background` property. # --hints-- -You should use the `background` on `.bb1d`. +Du solltest die `background` auf `.bb1d` verwenden. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background); @@ -33,19 +33,19 @@ You should give the `background` property a `linear-gradient`. assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient'); ``` -You should use `orange` as the first color in the `linear-gradient`. +Du solltest `orange` als erste Farbe im `linear-gradient` verwenden. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange'); ``` -You should use `--building-color1` as the second color in the `linear-gradient`. +Du solltest `--building-color1` als zweite Farbe im `linear-gradient` verwenden. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)'); ``` -You should use `--window-color1` as the third color in the `linear-gradient`. +Du solltest `--window-color1` als dritte Farbe im `linear-gradient` verwenden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md index 8eafd962bf4..586f865f53c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md @@ -7,7 +7,7 @@ dashedName: step-46 # --description-- -You can specify where you want a gradient transition to complete by adding it to the color like this: +Du kannst bestimmen, wo ein Farbverlaufsübergang enden soll, indem du ihn wie folgt zur Farbe hinzufügst: ```css gradient-type( @@ -17,11 +17,11 @@ gradient-type( ); ``` -Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action. +Hier wird er von `color1` zu `color2` zwischen `0%` und `20%` des Elements wechseln und dann für den Rest zu `color3` übergehen. Füge `80%` zur `--building-color1`-Farbe des `.bb1d` Farbverlaufs hinzu, damit du es in Aktion sehen kannst. # --hints-- -You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`. +Du solltest in der `linear-gradient` von `.bb1d` einen Wert von `80%` zur `--building-color1`-Farbe hinzufügen. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md index 6cd024c2887..de3948b48f0 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md @@ -7,17 +7,17 @@ dashedName: step-47 # --description-- -Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. +Entferne `orange` aus dem `.bb1d`-Farbverlauf und ändere die `80%` auf `50%`. Dies wird `--building-color1` in der oberen Hälfte festigen und in der unteren Hälfte zu `--window-color1` übergehen. # --hints-- -You should remove `orange` from the `linear-gradient`. +Du solltest `orange` aus `linear-gradient` entfernen. ```js assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange'); ``` -You should change the now first `linear-gradient` color to transition at `50%`. +Du solltest die jetzt erste `linear-gradient`-Farbe ändern, damit sie zu `50%` übergeht. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md index 4b95ab80428..96caf01277e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md @@ -17,13 +17,13 @@ Du solltest zwei `div`-Elemente zu `.bb2` hinzufügen. assert.equal(document.querySelector('div.bb2')?.children?.length, 2); ``` -You should give the first `div` a class of `bb2a`. +Du solltest dem ersten `div`-Element eine Klasse mit dem Namen `bb2a` zuweisen. ```js assert.exists(document.querySelector('div.bb2a')); ``` -You should give the second `div` a class of `bb2b`. +Du solltest dem zweiten `div`-Element eine Klasse mit dem Namen `bb2b` zuweisen. ```js assert.exists(document.querySelector('div.bb2b')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md index 8df31c09ece..2ba86d8cea9 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md @@ -7,17 +7,17 @@ dashedName: step-49 # --description-- -Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. +Gib `.bb2b` eine `width` und `height` von `100%`, damit es den Baucontainer füllt. Du wirst ein bisschen später oben etwas hinzufügen. # --hints-- -You should give `.bb2b` a `width` of `100%`. +Du solltest `.bb2b` eine `width` von `100%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); ``` -You should give `.bb2b` a `height` of `100%`. +Du solltest `.bb2b` eine `height` von `100%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md index 830c6b5e15b..dbc9d75aa15 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md @@ -7,7 +7,7 @@ dashedName: step-51 # --description-- -Gradient transitions often gradually change from one color to another. You can make the change a solid line like this: +Farbverlaufs-Übergänge ändern sich oft schrittweise von einer Farbe zur anderen. Du kannst die Änderung als durchgezogene Linie wie folgt vornehmen: ```css linear-gradient( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md index a8692df23b1..535839c5455 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md @@ -7,11 +7,11 @@ dashedName: step-52 # --description-- -You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them. +Du kannst den harten Farbwechsel am Anfang des Abschnittes sehen. Ändere für diesen Abschnitt den Verlaufstyp von `linear-gradient` auf `repeating-linear-gradient`. Dadurch werden die vier Farben deines Farbverlaufs wiederholt bis es an den unteren Rand des Elements angelangt; so erhälst du ein paar Streifen und wirst davor bewahrt, eine Reihe von Elementen hinzufügen zu müssen, um sie zu erstellen. # --hints-- -You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`. +Du solltest die `background`-Eigenschaft der `.bb2b` so verändern, dass sie anstatt `linear-gradient` den `repeating-linear-gradient` verwendet. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md index b305ef50952..a0e24dab515 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md @@ -7,7 +7,7 @@ dashedName: step-54 # --description-- -Add these properties to `.bb2a`: +Füge diese Eigenschaften zu `.bb2a` hinzu: ```css margin: auto; @@ -19,23 +19,23 @@ border-left: 1vw solid #999; border-right: 1vw solid #999; ``` -After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. +After you add these, you can see how a thick border on an element gives you some angles where two sides meet. Du wirst den unteren Rand als den Anfang des Bauelements verwenden. # --hints-- -You should give `.bb2a` a `margin` of `auto`. +Du solltest `.bb2a` eine `margin` von `auto` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); ``` -You should give `.bb2a` a `width` of `auto`. +Du solltest `.bb2a` eine `width` von `auto` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); ``` -You should give `.bb2a` a `height` of `5vw`. +Du solltest `.bb2a` eine `height` von `5vw` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); @@ -47,19 +47,19 @@ You should give `.bb2a` a `border-top` of `1vw solid #000`. assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); ``` -You should give `.bb2a` a `border-bottom` of `1vw solid #000`. +Du solltest `.bb2a` einen `border-bottom` von `1vw solid #000` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); ``` -You should give `.bb2a` a `border-left` of `1vw solid #999`. +Du solltest `.bb2a` einen `border-left` von `1vw solid #999` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); ``` -You should give `.bb2a` a `border-right` of `1vw solid #999`. +Du solltest `.bb2a` eine `border-right` von `1vw solid #999` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md index 0212c98453f..c27579d9521 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md @@ -7,29 +7,29 @@ dashedName: step-55 # --description-- -Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. +Entferne als nächstes die `width` und `height` aus `.bb2a` und ändere die `border-left` und `border-right` so, dass sie `5vw` statt `1vw` verwenden. Das Element hat jetzt die Größe Null und die Ränder kommen in der Mitte zusammen. # --hints-- -You should remove the `width` from `.bb2a`. +Du solltest die `width` aus `.bb2a` entfernen. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); ``` -You should remove the `height` from `.bb2a`. +Du solltest die `height` aus `.bb2a` entfernen. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); ``` -You should change the `border-left` to use `5vw`. +Du solltest den `border-left` so ändern, dass er `5vw` verwendet. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); ``` -You should change the `border-right` to use `5vw`. +Du solltest den `border-right` so ändern, dass er `5vw` verwendet. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md index a048a78b351..65de6295488 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md @@ -11,19 +11,19 @@ Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` a # --hints-- -You should change `border-bottom` to use `5vh`. +Du solltest `border-bottom` so ändern, dass er `5vh` verwendet. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); ``` -You should change `border-bottom` to use `--building-color2`. +Du solltest `border-bottom` so ändern, dass er `--building-color2` verwendet. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); ``` -`border-bottom` should be `5vh solid var(--building-color2)`. +`border-bottom` sollte `5vh solid var(--building-color2)` entsprechen. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md index 43640953c05..adb81b10c80 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md @@ -7,7 +7,7 @@ dashedName: step-59 # --description-- -Auf zum nächsten Bauelement! Erstelle eine neue Variable namens `--window-color3` in `:root` und weise ihr den Wert `#d98cb3` zu. This will be the secondary color for the pink buildings. +Auf zum nächsten Bauelement! Erstelle eine neue Variable namens `--window-color3` in `:root` und weise ihr den Wert `#d98cb3` zu. Dies wird die Sekundärfarbe für die rosa Bauelemente sein. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md index b896afb1dd4..5ef2a63ef97 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md @@ -11,37 +11,37 @@ Move the `display`, `flex-direction`, and `align-items` properties and values fr # --hints-- -You should remove `display` from `.bb1`. +Du solltest `display` aus `.bb1` entfernen. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display); ``` -You should move `display` with a value of `flex` to `.building-wrap`. +Du solltest `display` mit einem Wert von `flex` nach `.building-wrap` verschieben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex"); ``` -You should remove `flex-direction` from `.bb1`. +Du solltest `flex-direction` aus `.bb1` entfernen. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection); ``` -You should move `flex-direction` with a value of `column` to `.building-wrap`. +Du solltest `flex-direction` mit einem Wert von `column` nach `.building-wrap` verschieben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column"); ``` -You should remove `align-items` from `.bb1`. +Du solltest `align-items` aus `.bb1` verschieben. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems); ``` -You should move `align-items` with a value of `center` to `.building-wrap`. +Du solltest `align-items` mit einem Wert von `center` nach `.building-wrap` verschieben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md index e0e27811fc1..ff42eb459ee 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md @@ -7,7 +7,7 @@ dashedName: step-67 # --description-- -Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it. +Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. Dies wird die zentrierenden Eigenschaften auf die Bauelemente anwenden, die sie benötigen. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md index e5f03d84506..eb3c2ce472c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md @@ -7,17 +7,17 @@ dashedName: step-68 # --description-- -Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building. +Erstelle eine neue Variable namens `--window-color4` in `:root` und gib ihr einen Wert von `#8cb3d9`. This will be the secondary color for the last background building. # --hints-- -You should define a new property variable `--window-color4`. +Du solltest eine neue Eigenschaftsvariable `--window-color4` definieren. ```js assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4")); ``` -You should give `--window-color4` a value of `#8cb3d9`. +Du solltest `--window-color4` einen Wert von `#8cb3d9` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md index b307b34b4a5..26b3ff6cf92 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md @@ -7,17 +7,17 @@ dashedName: step-69 # --description-- -Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building. +Niste vier neue `div`-Elemente innerhalb `.bb4c`, gib ihnen alle eine Klasse von `bb4-window`. Dies werden die Fenster für dieses Bauelement sein. # --hints-- -You should add four `div` elements to `.bb4c`. +Du solltest vier `div`-Elemente zu `.bb4c` hinzufügen. ```js assert.equal(document.querySelector(".bb4c")?.children?.length, 4); ``` -You should give each new `div` a class of `bb4-window`. +Du solltest jedem neuen `div` eine Klasse von `bb4-window` geben. ```js assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md index d5e8016c8f5..3b5be84342e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md @@ -7,23 +7,23 @@ dashedName: step-70 # --description-- -Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`. +Gib der `bb4-window`-Klasse eine `width` von `18%`, eine `height` von `90%` und füge deine `--window-color4`-Variable als die `background-color` hinzu. # --hints-- -You should give `.bb4-window` a `width` of `18%`. +Du solltest `.bb4-window` eine `width` von `18%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%"); ``` -You should give `.bb4-window` a `height` of `90%`. +Du solltest `.bb4-window` eine `height` von `90%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%"); ``` -You should give `.bb4-window` a `background-color` of `--window-color4`. +Du solltest `.bb4-window` eine `background-color` von `--window-color4` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md index a57e28b9686..ab98bd4666a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md @@ -8,29 +8,29 @@ dashedName: step-71 # --description-- -The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`. Make `.window-wrap` a flexbox container, and use the `align-items` and `justify-content` properties to center its child elements vertically and evenly space them in their parent, respectively. +Die Fenster sind links neben dem Abschnitt, hinter dem violetten Bauelement, aufeinander gestapelt. Füge eine neue Klasse namens `window-wrap` unter `.building-wrap` hinzu. Mache `.window-wrap` zu einem Flexbox-Container und verwende die `align-items` und `justify-content`-Eigenschaften, um seine untergeordneten Elemente vertikal zu zentrieren bzw. um sie gleichmäßig im übergeordneten Element zu verteilen. # --hints-- -You should create a `.window-wrap` selector. +Du solltest einen `.window-wrap`-Selektor erstellen. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap")); ``` -You should give `.window-wrap` a `display` of `flex`. +Du solltest `.window-wrap` einen `display` von `flex` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex"); ``` -You should give `.window-wrap` an `align-items` of `center`. +Du solltest `.window-wrap` ein `align-items` mit dem Wert `center` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center"); ``` -You should give `.window-wrap` a `justify-content` of `space-evenly`. +Du solltest `.window-wrap` einen `justify-content` mit dem Wert `space-evenly` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md index 989030293d5..1e9e3b6b82d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md @@ -7,7 +7,7 @@ dashedName: step-81 # --description-- -Auf zum nächsten Bauelement! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order. +Auf zum nächsten Bauelement! Bette zwei `div`-Elemente innerhalb des `.fb2` ein und weise ihnen in Reihenfolge die Klassen `fb2a` und `fb2b` zu. # --hints-- @@ -17,14 +17,14 @@ Du solltest innerhalb `.fb2` zwei `div`-Elemente hinzufügen. assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2); ``` -You should give the first new `div` a class of `fb2a`. +Du solltest dem ersten neuen `div` die Klasse `fb2a` zuweisen. ```js assert.exists(document.querySelector("div.fb2 > div.fb2a")); assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild); ``` -You should give the second new `div` a class of `fb2b`. +Du solltest dem zweiten neuen `div` die Klasse `fb2b` zuweisen. ```js assert.exists(document.querySelector("div.fb2 > div.fb2b")); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md index ffc3f82049a..86ebf9855cc 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md @@ -7,23 +7,23 @@ dashedName: step-82 # --description-- -Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`. +Gib `.fb2a` eine `width` von `100%` und `.fb2b` eine `width` von `100%` und `height` von `75%`. # --hints-- -You should give `.fb2a` a `width` of `100%`. +Du solltest `.fb2a` eine `width` von `100%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%"); ``` -You should give `.fb2b` a `width` of `100%`. +Du solltest `.fb2b` eine `width` von `100%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%"); ``` -You should give `.fb2b` a `height` of `75%`. +Du solltest `.fb2b` eine `height` von `75%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md index b2c0f150e62..69d09d4b14e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md @@ -7,17 +7,17 @@ dashedName: step-83 # --description-- -Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. +Niste drei `div`-Elemente innerhalb von `.fb2b` und gib ihnen eine Klasse von `fb2-window`. Dies werden die Fenster für diesen Abschnitt des Bauelements sein. # --hints-- -You should add three `div` elements within `.fb2b`. +Du solltest drei `div`-Elemente innerhalb von `.fb2b` hinzufügen. ```js assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3); ``` -You should give the three new `div` elements each a class of `fb2-window`. +Du solltest den drei neuen `div` Elementen jeweils eine Klasse von `fb2-window` geben. ```js assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md index 29d2d2802c2..003eb3e0981 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md @@ -7,11 +7,11 @@ dashedName: step-84 # --description-- -Add your `window-wrap` class to `.fb2b` to position the new window elements. +Füge deine `window-wrap`-Klasse zu `.fb2b` hinzu, um deine neuen Fensterelemente zu positionieren. # --hints-- -You should add the class `window-wrap` to `.fb2b`. +Du solltest deine Klasse `window-wrap` zu `.fb2b` hinzufügen. ```js assert.exists(document.querySelector("div.fb2b.window-wrap")); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md index ae4df4a6441..9243961aaac 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md @@ -7,23 +7,23 @@ dashedName: step-85 # --description-- -Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. +Gib den `.fb2-window`-Elementen eine `width` von `22%`, `height` von `100%` und eine `background-color` aus deiner `--window-color3` Variable. # --hints-- -You should give the `.fb2-window` elements a `width` of `22%`. +Du solltest den `.fb2-window`-Elementen eine `width` von `22%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%"); ``` -You should give the `.fb2-window` elements a `height` of `100%`. +Du solltest den `.fb2-window`-Elementen eine `height` von `100%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%"); ``` -You should give the `.fb2-window` elements a `background-color` of `--window-color3`. +Du solltest den `.fb2-window`-Elementen eine `background-color` von `--window-color3` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md index 615821e6ea7..1287ab1bde3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md @@ -7,17 +7,17 @@ dashedName: step-86 # --description-- -Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container. +Verschiebe die `background-color`-Eigenschaft und den Wert von `.fb2` nach `.fb2b`, um nur den Abschnitt und nicht den Container zu färben. # --hints-- -You should remove the `background-color` property from `.fb2`. +Du solltest die `background-color`-Eigenschaft aus `.fb2` verschieben. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor); ``` -You should give `.fb2b` a `background-color` of `--building-color3`. +Du solltest `.fb2b` eine `background-color` von `--building-color3` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md index 6a9a8742e0c..b36bb03f8e6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md @@ -7,7 +7,7 @@ dashedName: step-94 # --description-- -Add your `window-wrap` class to the `.fb3a` element to center and space the windows. +Füge deine `window-wrap`-Klasse zu dem `.fb3a`-Element hinzu, um die Fenster zu zentrieren und zu verteilen. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md index d4372b3ed76..84c16c1a3c4 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md @@ -7,17 +7,17 @@ dashedName: step-97 # --description-- -Give `.fb4b` a `width` of `100%` and `height` of `89%`. +Gib `.fb4b` eine `width` von `100%` und `height` von `89%`. # --hints-- -You should give `.fb4b` a `width` of `100%`. +Du solltest `.fb4b` eine `width` von `100%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%"); ``` -You should give `.fb4b` a `height` of `89%`. +Du solltest `.fb4b` eine `height` von `89%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md index 78a71bba8a3..c02a501eabf 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md @@ -7,17 +7,17 @@ dashedName: step-98 # --description-- -Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`. +Füge deine `--building-color1`-Variable als Wert der `background-color`-Eigenschaft von `.fb4b` hinzu. Entferne dann die `background-color` von `.fb4`. # --hints-- -You should remove the `background-color` from `.fb4`. +Du solltest die `background-color` aus `.fb4` entfernen. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor); ``` -You should give `.fb4b` a `background-color` of `--building-color1`. +Du solltest `.fb4b` eine `background-color` von `--building-color1` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md index 3740cf48535..66ee1d20518 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md @@ -7,7 +7,7 @@ dashedName: step-99 # --description-- -Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`. +Bette innerhalb `.fb4b` sechs `div`-Elemente ein und weise ihnen allen die Klasse `fb4-window` zu. # --hints-- @@ -17,7 +17,7 @@ Du solltest innerhalb `.fb4b` sechs `div`-Elemente hinzufügen. assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6); ``` -You should give each new `div` a class of `fb4-window`. +Du solltest jedem neuen `div` die Klasse `fb4-window` zuweisen. ```js assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md index 4c5b5e224e3..510c3d85637 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md @@ -7,23 +7,23 @@ dashedName: step-100 # --description-- -Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. +Gib den `.fb4-window`-Elementen eine `width` von `30%`, `height` von `10%` und `border-radius` von `50%`. Dies wird einige kreisförmige Fenster für dieses Bauelement schaffen. # --hints-- -You should give `.fb4-window` a `width` of `30%`. +Du solltest `.fb4-window` eine `width` von `30%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%"); ``` -You should give `.fb4-window` a `height` of `10%`. +Du solltest `.fb4-window` eine `height` von `10%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%"); ``` -You should give `.fb4-window` a `border-radius` of `50%`. +Du solltest `.fb4-window` einen `border-radius` von `50%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md index 24c61f9cde4..0d8eca6c685 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md @@ -7,17 +7,17 @@ dashedName: step-101 # --description-- -Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space. +Fülle die Fenster dieses Bauelement mit deiner Sekundärfarbe aus. Füge außerden eine `margin` von `10%` hinzu, um den Fenstern etwas Abstand zu geben. # --hints-- -You should give `.fb4-window` a `background-color` of `--window-color1`. +Du solltest `.fb4-window` eine `background-color` von `--window-color1` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)"); ``` -You should give `.fb4-window` a `margin` of `10%`. +Du solltest `.fb4-window` eine `margin` von `10%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md index 6a32e2eae7b..ec3eb4dbf49 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md @@ -7,17 +7,17 @@ dashedName: step-102 # --description-- -The windows are stacked on top of each other on the rightmost purple building. Turn the building into a flexbox parent, and use the `flex-wrap` property to put the windows side by side, and push them down to a new row when they don't fit. +Die Fenster sind auf dem violetten Bauelement ganz rechts übereinander gestapelt. Verwandle das Bauelement in eine übergeordnete Flexbox und verwende die `flex-wrap`-Eigenschaft, um die Fenster nebeneinander zu platzieren und sie in eine neue Reihe zu schieben, wenn der Platz nicht ausreicht. # --hints-- -You should give `.fb4b` a `display` of `flex`. +Du solltest `.fb4b` eine `display` von `flex` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex"); ``` -You should give `.fb4b` a `flex-wrap` of `wrap`. +Du solltest `.fb4b` einen `flex-wrap` von `wrap` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md index 6d24c346a62..1f0593afb91 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md @@ -7,7 +7,7 @@ dashedName: step-113 # --description-- -Füge `circle closest-corner at 15% 15%,` am oberen Rand der Farbverlaufsliste des Himmels hinzu, wo du eine Richtung für den Farbverlauf setzen würdest. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. +Füge `circle closest-corner at 15% 15%,` am oberen Rand der Farbverlaufsliste des Himmels hinzu, wo du eine Richtung für den Farbverlauf setzen würdest. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. Dies sind einige Schlüsselwörter, die in Farbverläufe eingebaut werden, um zu beschreiben, wie sie sich verhalten sollen. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md index 46a7886c9ec..2e3fb9a90ae 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md @@ -7,7 +7,7 @@ dashedName: step-114 # --description-- -A media query can be used to change styles based on certain conditions, and they look like this: +Eine Media Query kann verwendet werden, um Stile auf Grundlage von bestimmten Bedingungen zu ändern, und sie sehen folgendermaßen aus: ```css @media (condition) { @@ -15,11 +15,11 @@ A media query can be used to change styles based on certain conditions, and they } ``` -Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less. +Füge eine leere Media Query am Ende deines Stylesheets mit einer Bedingung von `max-width: 1000px` hinzu. Die hier hinzugefügten Stile werden wirksam, wenn die Dokumentgröße 1000px breit oder kleiner ist. # --hints-- -You should add an empty media query with `max-width: 1000px`. +Du solltest eine leere Media Query mit `max-width: 1000px` hinzufügen. ```js assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md index cf58f3f6cc0..40ddf5f71ec 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md @@ -7,23 +7,23 @@ dashedName: step-116 # --description-- -In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors. +Ändere in der `sky`-Klasse der Media Query die beiden `#ffcf33`-Farbwerte in `#ccc`, die `#ffff66` in `#445` und die `#bbeeff` in `#223` um. Dann kannst du die Größe deines Fensters ändern, um zu sehen, wie der Hintergrund seine Farbe ändert. # --hints-- -You should change the first color values from `#ffcf33` to `#ccc`. +Du solltest die ersten Farbwerte von `#ffcf33` zu `#ccc` ändern. ```js assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); ``` -You should change the second color value from `#ffff66` to `#445`. +Du solltest den zweiten Farbwert von `#ffff66` in `#445` ändern. ```js assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); ``` -You should change the third color value from `#bbeeff` to `#223`. +Du solltest den dritten Farbwert von `#bbeeff` in `#223` ändern. ```js assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md index e8fd37a921e..85e3a438559 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md @@ -7,7 +7,7 @@ dashedName: step-117 # --description-- -Füge oben in der Media Query einen `:root`-Selektor hinzu. Then redefine all four of the `--building-color` variables to use the value `#000` there. +Füge oben in der Media Query einen `:root`-Selektor hinzu. Definiere dann alle vier der `--building-color`-Variablen neu, sodass sie dort den Wert `#000` verwenden. # --hints-- @@ -17,7 +17,7 @@ Du solltest der Media Query einen `:root`-Selektor hinzufügen. assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined); ``` -You should add `--building-color1` with a value of `#000`. +Du solltest `--building-color1` mit einem Wert von `#000` hinzufügen. ```js assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md index 585173771e9..6aef98558dd 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md @@ -9,7 +9,7 @@ dashedName: step-118 Definiere schließlich alle vier `--window-color`-Variablen im `:root`-Selektor der MediaQuery neu, um `#777` zu verwenden. Wenn du damit fertig bist, ändere die Größe des Fensters und beobachte, wie es vom Tag zur Nacht wird. -Variablen werden in erster Linie mit Farben verwendet, und so hast du sie auch hier verwendet. But they can be given any value and used on any property. Dein Projekt sieht großartig aus! +Variablen werden in erster Linie mit Farben verwendet, und so hast du sie auch hier verwendet. Sie können jedoch einen beliebigen Wert erhalten und für jede Eigenschaft verwendet werden. Dein Projekt sieht großartig aus! # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md index 577100e1c91..d03cf287f81 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md @@ -7,7 +7,7 @@ dashedName: step-62 # --description-- -Speaking of `padding`, the submit button is sitting at the bottom of the `form` element. Füge nur im unteren Teil des `form` `2em` von `padding` hinzu. +Apropos `padding`, der Bestätigungsbutton liegt im unteren Teil des `form`-Elements. Füge nur im unteren Teil des `form` `2em` von `padding` hinzu. # --hints-- @@ -17,7 +17,7 @@ Du solltest die `padding-bottom`-Eigenschaft verwenden. assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom); ``` -You should give the `padding-bottom` a value of `2em`. +Du solltest der `padding-bottom` den Wert `2em` zuweisen. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md index 382675256f4..89a51bf4c7a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md @@ -7,7 +7,7 @@ dashedName: step-68 # --description-- -Use an id selector to create a rule for the element with the id `eyes-div`. Set the `width` to `180px` and the `height` to `50px`. +Verwende einen ID-Selektor, um eine Regel für das Element mit der ID `eyes-div` zu erstellen. Set the `width` to `180px` and the `height` to `50px`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md index 29a2c5836d0..c8029f27808 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md @@ -7,9 +7,9 @@ dashedName: step-37 # --description-- -Der `:first-of-type`-Pseudo-Selektor wird verwendet, um das erste Element anzuvisieren, das mit dem Selektor übereinstimmt. Erstelle einen `h1 .flex span:first-of-type`-Selektor, um das erste `span`-Element in deinem `.flex`-Container anzuvisieren. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page. +Der `:first-of-type`-Pseudo-Selektor wird verwendet, um das erste Element anzuvisieren, das mit dem Selektor übereinstimmt. Erstelle einen `h1 .flex span:first-of-type`-Selektor, um das erste `span`-Element in deinem `.flex`-Container anzuvisieren. Denke daran, dass deine `span`-Elemente visuell umgekehrt sind, sodass dies als zweites Element auf der Seite erscheint. -Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading. +Weise deinem neuen Selektor eine `font-size`-Eigenschaft von `0.7em` zu, damit er wie eine Unterüberschrift aussieht. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md index a9dea3ed405..f11fb7712a8 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md @@ -7,7 +7,7 @@ dashedName: step-9 # --description-- -Browsers can apply default margin and padding values to specific elements. To make sure your piano looks correct, you need to reset the box model. +Browser können auf bestimmte Elemente Standardwerte für Margin und Padding anwenden. Um sicherzustellen, dass dein Klavier richtig aussieht, musst du das Boxmodell zurücksetzen. Füge einen `html`-Regelselektor zu deiner CSS-Datei hinzu und setze die `box-sizing`-Eigenschaft auf `border-box`. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md index d8f17534e4a..a5a30c09abe 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md @@ -7,7 +7,7 @@ dashedName: step-32 # --description-- -Center the `.three` element on the canvas by setting its `margin` to `auto`. +Zentriere das `.three`-Element auf der Canvas, indem du seine `margin` auf `auto` setzt. # --hints-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 9e9a7930b60..6c79a52ff26 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 Una proprietà utile di un _SVG_ (scalable vector graphics - grafica vettoriale scalabile) è che contiene un attributo `path` che permette di scalare l'immagine senza influenzare la risoluzione dell'immagine risultante. -Attualmente, l'elemento `img` sta assumendo la sua dimensione predefinita, che è troppo grande. Ridimensiona l'immagine correttamente usando il suo `id` come selettore e impostando la proprietà `width` a `max(100px, 18vw)`. +Attualmente, l'elemento `img` sta assumendo la sua dimensione predefinita, che è troppo grande. CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -Dovresti usare il selettore `#logo` per selezionare l'elemento `img`. +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -Dovresti dare a `img` una proprietà `width` con il valore `max(100px, 18vw)`. +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index c3df26bbdea..8de7c937fdf 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -Seleziona gli elementi della lista non ordinata dentro gli elementi `nav` e usa _Flexbox_ per distanziare uniformemente gli elementi figli. +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index 2b603579d2c..62ac557f550 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -All'interno degli elementi `div.question-block`, annida un elemento `label` e dai all'elemento `label` del contenuto di testo. +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 98cf8f5c860..d0cf66ec71d 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 _SVG_ (scalable vector graphics) の便利な特徴として、SVG は、画像の解像度に影響を与えずに拡大縮小することを可能にする `path` 属性を含みます。 -今、`img` 要素はデフォルトのサイズが使われていますが、大きすぎるようです。 正しく表示するため、`id` をセレクターとして使用し、`width` の値を `max(100px, 18vw)` に設定して画像を縮小してください。 +今、`img` 要素はデフォルトのサイズが使われていますが、大きすぎるようです。 CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -`#logo` セレクターを使用して `img` 要素を選択する必要があります。 +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -`img` 要素の `width` を `max(100px, 18vw)` に設定する必要があります。 +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index 75ca71b35da..b01142d09c9 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -`nav` 要素内の順序なしリスト要素を対象に、_フレックスボックス_ を使用して子要素の間隔を等しくしてください。 +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index f1f23d7a948..9c525dd1270 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -`div.question-block` 要素内に `label` 要素を 1 つネストし、その `label` 要素にテキストコンテンツを入れてください +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints-- diff --git a/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md b/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md index 8a929223585..82f4e9ffdf6 100644 --- a/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md +++ b/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md @@ -44,7 +44,7 @@ Note que a variável `$key` é necessária para referenciar as chaves no mapa. C # --instructions-- -Escreva uma diretiva `@each` que passar por uma lista: `blue, black, red` e atribui cada variável à classe `.color-bg`, aonde a parte `color` coloca cada item na cor respectiva. Cada classe também deve definir a propriedade `background-color` para a respectiva cor. +Escreva uma diretiva `@each` que percorra uma lista, `blue, black, red`, e atribua cada variável à classe `.color-bg`, onde a parte `color` mude cada item para a cor respectiva. Cada classe também deve definir a propriedade `background-color` para a respectiva cor. # --hints-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 9b9025b1d40..04ca7f80d9d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 Uma propriedade útil de um _SVG_ (gráficos vetoriais escaláveis) é o atributo `path` (caminho), que permite que a imagem seja dimensionada sem afetar a resolução da imagem resultante. -Atualmente, o `img` está assumindo que é o tamanho padrão, o que é muito grande. Para arrumar, dimensione a imagem usando o `id` como seletor e defina a largura `width` como `max(100px, 18vw)`. +Atualmente, o `img` está assumindo que é o tamanho padrão, o que é muito grande. CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -Você deve usar o seletor `#logo` para direcionar o elemento `img`. +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -Você deve dar à `img` uma `width` de `max(100px, 18vw)`. +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index 7f8c505799f..25639bdae55 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -Marque os elementos da lista não ordenados dentro dos elementos `nav` e use _Flexbox_ para espaçar igualmente os elementos filhos. +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index 0d694f3716f..f74e6062cff 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -Dentro dos elementos `div.question-block`, aninhe um elemento `label` e dê ao elemento `label` conteúdo de texto +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints-- diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md index 1d121c8b08e..8f2cff9a691 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md @@ -17,7 +17,7 @@ Você deve usar a atribuição composta com `health`. assert.match(attack.toString(), /health\s*-=/); ``` -Você deve subtrair o nível atual de `health` do monstro. +Você deve subtrair o nível atual do monstro da `health` do personagem. ```js assert.match(attack.toString(), /health\s*-=\s*monsters\[fighting\]\.level/); diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md index c87053a54a2..6dcb5e57df3 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md @@ -7,7 +7,7 @@ dashedName: step-150 # --description-- -Adicione uma instrução `else` à primeira instrução `if` dentro da função `attack()`. Na instrução `else`, use o operador `+=` para adicionar o texto `You miss.` até o final do `text.innerText`. +Adicione uma instrução `else` à primeira instrução `if` dentro da função `attack()`. Na instrução `else`, use o operador `+=` para adicionar o texto `You miss.` ao final de `text.innerText`. # --hints-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 805d16ddc6b..ca4b2705559 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 Sifa muhimu ya _SVG_ (scalable vector graphics) ni kwamba ina sifa ya `path` ambayo inaruhusu picha kuongezwa bila kuathiri matokeo yake. -Kwa sasa, `img` inachukua ukubwa wake wa chaguomsingi, ambao ni mkubwa sana. Kwa usahihi, kadiria picha ukitumia `id` yake kama kiteuzi, na uweke `width` hadi `max(100px, 18vw)`. +Kwa sasa, `img` inachukua ukubwa wake wa chaguomsingi, ambao ni mkubwa sana. CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -Unapaswa kutumia kichaguzi cha `#logo` ili kulenga kipengele cha `img`. +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -Unapaswa kuipa `img` `width` ya `max(100px, 18vw)`. +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index 3d34b72616e..09c99d7381f 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -Lenga vipengele vya orodha ambavyo havijapangwa ndani ya vipengee vya `nav` na utumie _Flexbox_ ili kuweka nafasi sawa. +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index e874e474a5d..5758a7f4ce2 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -Ndani ya vipengele vya `div.question-block`, weka kipengele kimoja cha `label`, na ukipe kipengele cha `label` maudhui ya maandishi +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index d4dfa6a80f0..9a62931cecd 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,17 +9,27 @@ dashedName: step-8 Корисна властивість _SVG_ (масштабована векторна графіка): завдяки атрибуту `path` можна масштабувати зображення без впливу на роздільність вихідного зображення. -Наразі `img` припускає свій розмір за замовчуванням, що є занадто великим. Належним способом виміряйте зображення, використовуючи `id` як селектор та встановлюючи `width` на `max(100px, 18vw)`. +Наразі `img` припускає свій розмір за замовчуванням, що є занадто великим. CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints-- -Ви повинні використати селектор `#logo`, щоб націлити елемент `img`. +You should use the `#logo` selector to target the `img` element. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -Ви повинні надати `img` властивість `width` зі значенням `max(100px, 18vw)`. +You should give the `img` a `width` of `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index 14daadbf9c5..5c2c8b1618c 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -Націльте невпорядковані елементи списку в межах елементів `nav` та використайте _Flexbox_, щоб рівномірно розставити дочірні елементи. +Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index 89ad1f8cc42..31f7971d814 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -В межах елементів `div.question-block` вкладіть один елемент `label` та надайте елементам `label` текстового вмісту +Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. # --hints--