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

2026-05-28 18:26:54 +00:00 · 2023-06-13 00:48:10 +05:30
parent b46b527002
commit d5535acf21
179 changed files with 479 additions and 479 deletions
@@ -8,7 +8,7 @@ dashedName: graphing-systems

 # --description--

-This first video will show you how to graph systems of equations with with written math, then code.
+This first video will show you how to graph systems of equations with written math, then code.

 Here is the <a href="https://colab.research.google.com/drive/1N1JEZJctODxsntROnmg0VqMSHXYdIlFD?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">Colab notebook used in this video.</a>

@@ -8,7 +8,7 @@ dashedName: graphing-systems

 # --description--

-這第一個視頻將向你展示如何用書面數學繪製方程組的圖像，然後是代碼。
+This first video will show you how to graph systems of equations with written math, then code.

 這是<a href="https://colab.research.google.com/drive/1N1JEZJctODxsntROnmg0VqMSHXYdIlFD?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">這個視頻中用到的 Colab 筆記本</a>。

@@ -8,7 +8,7 @@ dashedName: graphing-systems

 # --description--

-这第一个视频将向你展示如何用书面数学绘制方程组的图像，然后是代码。
+This first video will show you how to graph systems of equations with written math, then code.

 这是<a href="https://colab.research.google.com/drive/1N1JEZJctODxsntROnmg0VqMSHXYdIlFD?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">这个视频中用到的 Colab 笔记本</a>。

@@ -8,7 +8,7 @@ dashedName: graphing-systems

 # --description--

-This first video will show you how to graph systems of equations with with written math, then code.
+This first video will show you how to graph systems of equations with written math, then code.

 Here is the <a href="https://colab.research.google.com/drive/1N1JEZJctODxsntROnmg0VqMSHXYdIlFD?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">Colab notebook used in this video.</a>

@@ -23,13 +23,13 @@ Du solltest den Bestätigungsbutton innerhalb des `form`-Elements platzieren.
 assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
 ```

-You should place the submit button after the last `section` element.
+Du solltest den Bestätigungsbutton hinter das letzte `section`-Element einfügen.

 ```js
 assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
 ```

-You should give the submit button a `type` of `submit`.
+Du solltest dem Bestätigungsbutton ein `type`-Attribut mit `submit` als Wert zuweisen.

 ```js
 assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
@@ -7,7 +7,7 @@ dashedName: step-55

 # --description--

-To make the first section look more inline, target only the `input` elements within `.info` elements, and set their `width` to `50%`, and left-align their text.
+Um den ersten Abschnitt „inline“ aussehen zu lassen, solltest du nur die `input`-Elemente innerhalb der `.info`-Elemente auswählen und ihre `width` auf `50%` setzen sowie deren Text links ausrichten.

 # --hints--

@@ -7,17 +7,17 @@ dashedName: step-5

 # --description--

-It's time to add some menu content. Add a `main` element within the existing `body` element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
+Es ist an der Zeit, ein paar Menü-Inhalte hinzuzufügen. Füge ein `main`-Element innerhalb des vorhandenen `body`-Elements ein. Es wird irgendwann Preisinformationen über die vom Café angebotenen Kaffees und Desserts enthalten.

 # --hints--

-Your code should have an opening `<main>` tag.
+Dein Code sollte über ein öffnendes `<main>`-Tag verfügen.

 ```js
 assert(code.match(/<main>/i));
 ```

-Your code should have a closing `</main>` tag.
+Dein Code sollte über ein abschließendes `</main>`-Tag verfügen.

 ```js
 assert(code.match(/<\/main>/i));
@@ -11,7 +11,7 @@ Bis jetzt warst du in Bezug auf die Präsentation und das Aussehen des von dir e

 # --hints--

-Your code should have an opening `<style>` tag.
+Dein Code sollte ein öffnendes `<style>`-Tag haben.

 ```js
 assert(code.match(/<style\s*>/i));
@@ -11,7 +11,7 @@ Erstelle ein `h2`-Element innerhalb des `section`-Elements und gib ihm den Text

 # --hints--

-You should have an opening `<h2>` tag.
+Du solltest ein öffnendes `<h2>`-Tag haben.

 ```js
 assert(code.match(/<h2\s*>/i));
@@ -9,7 +9,7 @@ dashedName: step-36

 So in etwa ist es das, was du möchtest, aber jetzt wäre es noch schön, wenn die Sorte und der Preis sich in der gleichen Zeile befinden würden. `p`-Elemente sind <dfn>block-level</dfn>-Elemente, sie nehmen also die gesamte Breite des übergeordneten Elements in Anspruch.

-Um sie auf die gleiche Zeile zu bringen, musst du die `p`-Elemente ein wenig gestalten, damit sie sich mehr wie <dfn>inline</dfn>-Elemente verhalten. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
+Um sie auf die gleiche Zeile zu bringen, musst du die `p`-Elemente ein wenig gestalten, damit sie sich mehr wie <dfn>inline</dfn>-Elemente verhalten. Füge für diesen Zweck ein `class`-Attribut mit dem Wert `item` zum ersten `article`-Element unter der `Coffee`-Überschrift hinzu.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-70

 # --description--

-Siehst du, wie die Dicke der Linie größer aussieht? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. Wenn du den Rahmen in dieselbe Farbe wie den Hintergrund änderst, beträgt die Gesamthöhe der Linie `5px` (`3px` plus die obere und untere Rahmenbreite von `1px`).
+Siehst du, wie die Dicke der Linie größer aussieht? Der Standardwert einer Eigenschaft namens `border-width` ist `1px` für alle Kanten von `hr`-Elementen. Wenn du den Rahmen in dieselbe Farbe wie den Hintergrund änderst, beträgt die Gesamthöhe der Linie `5px` (`3px` plus die obere und untere Rahmenbreite von `1px`).

 Ändere die `height` Eigenschaft der `hr` auf `2px`, so dass die Gesamthöhe `4px` ist.

@@ -18,7 +18,7 @@ const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.get
 assert(aVisitedColor === 'black');
 ```

-You should set the `color` property to `brown` when the link is `active`.
+Du solltest die `color`-Eigenschaft auf `brown` setzen, wenn der Link angeklickt wird - `active`.

 ```js
 const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color');
@@ -7,7 +7,7 @@ dashedName: step-87

 # --description--

-Now apply the `address` class to the `p` element containing the street address `123 Free Code Camp Drive`.
+Weise nun die `address`-Klasse dem `p`-Element mit der Adresse `123 Free Code Camp Drive` zu.

 # --hints--

@@ -11,7 +11,7 @@ Als Nächstes solltest du den Preis nach rechts ausrichten. Add a class named `p

 # --hints--

-You should add the `price` class to your `p` element.
+Du solltest die `price`-Klasse zu deinem `p`-Element hinzufügen.

 ```js
 assert(code.match(/<p\s*class=('|")price\1\s*>/i));
@@ -23,7 +23,7 @@ Du solltest nur ein Element mit der `price`-Klasse haben.
 assert($('.price').length === 1);
 ```

-Your `price` class should be on the `p` element with the text `3.00`.
+Deine `price`-Klasse sollte auf dem `p`-Element mit dem Text `3.00` stehen.

 ```js
 assert($('.price')[0].innerText.match(/3\.00/i));
@@ -29,7 +29,7 @@ Du solltest dein neues `div`-Element innerhalb des `div`-Elements mit der Klasse
 assert(document.querySelector('.container')?.children[0]?.localName === 'div');
 ```

-You should give your new `div` element a class of `marker`.
+Du solltest deinem neuen `div`-Element die Klasse `marker` zuweisen.

 ```js
 const containerChildren = [...document.querySelector('.container')?.children];
@@ -13,7 +13,7 @@ Verwende die `rgb`-Funktion, um der `linear-gradient`-Funktion reines Blau als d

 # --hints--

-Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))`.
+Deine `.red`-CSS-Regel sollte eine `background`-Eigenschaft mit dem Wert `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))` enthalten.

 ```js
 assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
@@ -7,7 +7,7 @@ dashedName: step-54

 # --description--

-Color-stops allow you to fine-tune where colors are placed along the gradient line. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function.
+Farbregler erlauben dir festzulegen, wo genau die Farben entlang der Farbverlaufslinie platziert werden. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function.

 For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space:

@@ -9,7 +9,7 @@ dashedName: step-79

 Im letzten Projekt hast du ein wenig über Ränder und die `border-color`-Eigenschaft gelernt.

-Alle HTML-Elemente haben Ränder, obwohl sie normalerweise auf `none` eingestellt sind. With CSS, you can control all aspects of an element's border, and set the border on all sides, or just one side at a time. Damit ein Rand sichtbar wird, musst du seine Breite und seinen Stil einstellen.
+Alle HTML-Elemente haben Ränder, obwohl sie normalerweise auf `none` eingestellt sind. Mit CSS kannst du alle Aspekte des Randes eines Elements steuern und den Rand auf allen Seiten oder nur auf einer Seite gleichzeitig festlegen. Damit ein Rand sichtbar wird, musst du seine Breite und seinen Stil einstellen.

 Füge in die `.sleeve`-CSS-Regel die `border-left-width`-Eigenschaft mit dem Wert `10px` hinzu.

@@ -9,11 +9,11 @@ dashedName: step-80

 Borders have several styles to choose from. You can make your border a solid line, but you can also use a dashed or dotted line if you prefer. Solid border lines are probably the most common.

-In the `.sleeve` CSS rule, add the `border-left-style` property with the value `solid`.
+Füge in der `.sleeve`-CSS-Regel die `border-left-style`-Eigenschaft mit dem Wert `solid` hinzu.

 # --hints--

-Your `.sleeve` CSS rule should have a `border-left-style` property and with the value `solid`.
+Deine `.sleeve`-CSS-Regel sollte eine `border-left-style`-Eigenschaft mit dem Wert `solid` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid');
@@ -11,11 +11,11 @@ Your border should be visible now. If no color is set, black is used by default.

 But to make your code more readable, it's better to set the border color explicitly.

-In the `.sleeve` CSS rule, add the `border-left-color` property with the value `black`.
+Füge in der `.sleeve`-CSS-Regel die `border-left-color`-Eigeschaft mit dem Wert `black` hinzu.

 # --hints--

-Your `.sleeve` CSS rule should have a `border-left-color` property and with the value `black`.
+Deine `.sleeve`-CSS-Regel sollte eine `border-left-color`-Eigenschaft mit dem Wert `black` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black');
@@ -19,19 +19,19 @@ In the `.sleeve` CSS rule, replace the `border-left-width`, `border-left-style`,

 # --hints--

-Your `.sleeve` CSS rule should not have a `border-left-width` property and value.
+Deine `.sleeve`-CSS-Regel sollte keine `border-left-width`-Eigenschaft und keinen Wert haben.

 ```js
 assert(!/border-left-width/g.test(code));
 ```

-Your `.sleeve` CSS rule should not have a `border-left-style` property and value.
+Deine `.sleeve`-CSS-Regel sollte keine `border-left-style`-Eigenschaft und keinen Wert haben.

 ```js
 assert(!/border-left-style/g.test(code));
 ```

-Your `.sleeve` CSS rule should not have a `border-left-color` property and value.
+Deine `.sleeve`-CSS-Regel sollte keine `border-left-color`-Eigenschaft und keinen Wert haben.

 ```js
 assert(!/border-left-color/g.test(code));
@@ -15,7 +15,7 @@ Setze in der `.sleeve`-CSS-Regel die `opacity`-Eigenschaft auf `0.5`.

 # --hints--

-Your `.sleeve` CSS rule should have an `opacity` property set to `0.5`.
+Deine `.sleeve`-CSS-Regel sollte eine `opacity`-Eigenschaft mit dem Wert `0.5` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5');
@@ -17,13 +17,13 @@ Du solltest einen Klassen-Selektor verwenden, um die Klasse `cap` auszuwählen.
 assert(new __helpers.CSSHelp(document).getStyle('.cap'));
 ```

-Your `.cap` CSS rule should have a `width` property set to `60px`.
+Deine `.cap`-CSS-Regel sollte eine `width`-Eigenschaft mit `60px` als Wert haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px');
 ```

-Your `.cap` CSS rule should have a `height` property set to `25px`.
+Deine `.cap`-CSS-Regel sollte eine `height`-Eigenschaft mit `25px` als Wert haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px');
@@ -11,7 +11,7 @@ Verwende für das zweite Farbargument einen Hex-Farbcode mit den Werten `71` fü

 # --hints--

-Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`.
+Deine `.green`-CSS-Regel sollte eine `background`-Eigenschaft mit dem Wert `linear-gradient(180deg, #55680D, #71F53E)` haben.

 ```js
 assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true));
@@ -9,7 +9,7 @@ dashedName: step-85

 Awesome. Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers.

-Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers.
+Add a cap and sleeve to both the green and blue markers. Du kannst die `div`-Elemente aus der roten Markierung einfach kopieren und sie in die beiden anderen Markierungen einfügen.

 # --hints--

@@ -11,11 +11,11 @@ Wie du sehen kannst, hast du einen einfachen roten Schatten um deine Markierung

 Was aber, wenn du deinen Schatten auf der gegenüberliegenden Seite positionieren möchtest? Du kannst dies tun, indem du negative Werte für `offsetX` und `offsetY` verwendest.

-Update the values for the `box-shadow` property, and set `offsetX` to `-5px`, and `offsetY` to `-5px`.
+Aktualisiere die Werte für die `box-shadow`-Eigenschaft und setze `offsetX` auf `-5px` sowie `offsetY` auf `-5px`.

 # --hints--

-Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `-5px -5px red`.
+Deine `.red`-CSS-Regel sollte eine `box-shadow`-Eigenschaft in Kurzschreibweise mit dem Wert `-5px -5px red` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px');
@@ -13,7 +13,7 @@ Was aber, wenn du den Schatten weiter ausdehnen möchtest? Du kannst dies mit de
 box-shadow: offsetX offsetY blurRadius spreadRadius color;
 ```

-Like `blurRadius`, `spreadRadius` defaults to `0` if it isn't included.
+Genau wie `blurRadius` trägt `spreadRadius` standardmäßig den Wert `0`, wenn er nicht inbegriffen ist.

 Füge zum Üben einen 5-Pixel-Schatten direkt um den blauen Marker herum hinzu.

@@ -13,7 +13,7 @@ Ersetze die benannte Farbe durch die `rgba`-Funktion. Verwende die Werte `83` f

 # --hints--

-Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 rgba(83, 14, 14, 0.8)`.
+Deine `.red`-CSS-Regel sollte eine zusammenfassende `box-shadow`-Eigenschaft mit dem Wert `0 0 20px 0 rgba(83, 14, 14, 0.8)` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px');
@@ -13,13 +13,13 @@ In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` pr

 # --hints--

-Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`.
+Deine `.green`-CSS-Regel sollte eine `box-shadow`-Eigenschaft in Kurzschreibweise mit dem Wert `0 0 20px 0 green` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px');
 ```

-Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`.
+Deine `.blue`-CSS-Regel sollte eine `box-shadow`-Eigenschaft mit dem Wert `0 0 20px 0 blue` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px');
@@ -13,7 +13,7 @@ Und damit ist deine Menge an farbigen Markierungen fertig! Gut gemacht.

 # --hints--

-Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`.
+Deine `.blue`-CSS-Regel sollte eine zusammenfassende `box-shadow`-Eigenschaft mit dem Wert `0 0 20px 0 hsla(223, 59%, 31%, 0.8)` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px');
@@ -13,13 +13,13 @@ This will make it easier for you to work with `rem` units later, as `2rem` would

 # --hints--

-You should create an `html` selector.
+Du solltest einen `html`-Selektor erstellen.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('html'));
 ```

-Your `html` selector should have a `font-size` property set to `62.5%`.
+Bei deinem `html`-Selektor sollte die `font-size`-Eigenschaft auf den Wert `62.5%` eingestellt sein.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '62.5%');
@@ -7,11 +7,11 @@ dashedName: step-30

 # --description--

-Create an `h2, h3, h4, h5, h6` selector. Give it a `font-family` property set to `Raleway` with a fallback of `sans-serif`.
+Erstelle einen `h2, h3, h4, h5, h6`-Selektor. Give it a `font-family` property set to `Raleway` with a fallback of `sans-serif`.

 # --hints--

-You should have an `h2, h3, h4, h5, h6` selector.
+Du solltest einen `h2, h3, h4, h5, h6`-Selektor haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6'));
@@ -7,9 +7,9 @@ dashedName: step-38

 # --description--

-For additional control over the layout of your content, you can have a CSS Grid within a CSS Grid.
+Für zusätzliche Kontrolle über das Layout deines Inhalts kannst du ein CSS-Raster innerhalb eines CSS-Rasters haben.

-Set the `display` property of your `.heading` selector to `grid`.
+Setze die `display`-Eigenschaft des `.heading`-Selektors auf `grid`.

 # --hints--

@@ -11,7 +11,7 @@ Normalisiere deine Seitengröße, indem du die `margin` und das `padding` des `b

 # --hints--

-You should give `body` a `margin` of `0`.
+Du solltest `body` eine `margin` mit dem Wert `0` zuweisen.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
@@ -7,7 +7,7 @@ dashedName: step-6

 # --description--

-Within the `body`, add a `div` with a `class` of `ground`.
+Füge innerhalb von `body` ein `div` mit der `class` `ground` hinzu.

 # --hints--

@@ -17,7 +17,7 @@ Du solltest ein neues `div` hinzufügen.
 assert.exists(document.querySelector('div'));
 ```

-You should give the `div` a `class` of `ground`.
+Du solltest deinem `div` eine `class` mit dem Namen `ground` zuweisen.

 ```js
 assert.include(document.querySelector('div')?.className, 'ground');
@@ -17,13 +17,13 @@ Du solltest den `.penguin`-Selektor verwenden.
 assert.match(code, /\.penguin\s*\{/);
 ```

-You should give `.penguin` a `width` of `300px`.
+Du solltest `.penguin` eine `width` in Höhe von `300px` zuweisen.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
 ```

-You should give `.penguin` a `height` of `300px`.
+Du solltest `.penguin` eine `height` in Höhe von `300px` zuweisen.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
@@ -7,7 +7,7 @@ dashedName: step-24

 # --description--

-To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+Füge, um den Hintergrund fertigzustellen, eine Sonne hinzu, indem du ein neues `div`-Element direkt hinter das `.back-mountain`-Element einfügst und ihm die Klasse `sun` zuweist.

 # --hints--

@@ -7,7 +7,7 @@ dashedName: step-32

 # --description--

-Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+Wähle das `.penguin-body`-Element aus und weise ihm eine `width`-Eigenschaft mit dem Wert `53%` sowie eine `height`-Eigenschaft mit dem Wert `45%` zu. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.

 # --hints--

@@ -7,11 +7,11 @@ dashedName: step-42

 # --description--

-Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+Runde das Wappen ab, indem du den unteren Pseudo-Element-Ecken einen Radius von `100%` gibst, während du die oberen Ecken bei `0%` belässt.

 # --hints--

-You should use the `border-radius` property to round off the crest.
+Du solltest die `border-radius`-Eigenschaft verwenden, um das Wappen abzurunden.

 ```js
 assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
@@ -7,7 +7,7 @@ dashedName: step-47

 # --description--

-Position the `.face` elements so that they are `15%` from the top.
+Positioniere die `.face`-Elemente so, dass sie `15%` von oben aus stehen.

 # --hints--

@@ -17,13 +17,13 @@ Du solltest den `.face.right`-Selektor verwenden.
 assert.match(code, /\.face\.right\s*\{/);
 ```

-You should give `.face.right` a `right` property.
+Du solltest `.face.right` eine `right`-Eigenschaft zuweisen.

 ```js
 assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
 ```

-You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+Du solltest `.face.right` den Wert `--fcc-expected--` für `right` zuweisen, aber es wurde `--fcc-actual--` gefunden.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
@@ -11,13 +11,13 @@ Falls relevant, ersetze Eigenschaftswerte durch deine `--penguin-face`-Variable.

 # --hints--

-You should give `.face` a `background-color` of `var(--penguin-face)`.
+Du solltest `.face` eine `background-color` mit dem Wert `var(--penguin-face)` zuweisen.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
 ```

-You should give `.chin` a `background-color` of `var(--penguin-face)`.
+Du sollest `.chin` eine `background-color` mit dem Wert `var(--penguin-face)` zuweisen.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
@@ -7,7 +7,7 @@ dashedName: step-60

 # --description--

-Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+Füge bei jedem `.eye`-Element ein `div`-Element hinzu, das jeweils eine `class` mit dem Wert `eye-lid` enthält.

 # --hints--

@@ -23,13 +23,13 @@ Du solltest ein `div`-Element innerhalb `.eye.right` hinzufügen, aber fandst `-
 assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
 ```

-You should give the first new `div` a `class` of `eye-lid`.
+Du solltest dem ersten neuen `div`-Element eine `class` mit dem Wert `eye-lid` zuweisen.

 ```js
 assert.exists(document.querySelector('.eye.left > div.eye-lid'));
 ```

-You should give the second new `div` a `class` of `eye-lid`.
+Du solltest dem zweiten neuen `div`-Element eine `class` mit dem Wert `eye-lid` zuweisen.

 ```js
 assert.exists(document.querySelector('.eye.right > div.eye-lid'));
@@ -29,7 +29,7 @@ Du solltest `.arm` eine `height` mit dem Wert `--fcc-expected--` zuweisen, aber
 assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
 ```

-You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+Du solltest `.arm` einen `background` mit dem Wert `linear-gradient(90deg, gray, rgb(209, 210, 199))` zuweisen.

 ```js
 assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
@@ -11,7 +11,7 @@ To keep the linear gradient on the correct side of the penguin's left arm, first

 # --hints--

-You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+Du solltest `.arm.left` ein `transform` mit dem Wert `rotate(130deg) scaleX(-1)` zuweisen.

 ```js
 const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
@@ -13,7 +13,7 @@ Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius

 # --hints--

-You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+Du solltest `.arm` einen `border-radius` mit dem Wert `30% 30% 30% 120%` zuweisen.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
@@ -16,7 +16,7 @@ gradient-type(
 );
 ```

-In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. Füge in `.bb1a` eine `background`-Eigenschaft unter die `background-color`-Eigenschaft hinzu. Lege sie als einen Farbverlauf vom Typ `linear-gradient` fest, der als erste Farbe `--building-color1` und als zweite Farbe `--window-color1` verwendet.
+In diesem Beispiel ist `color1` oben fest, `color2` ist unten fest und dazwischen gibt es gleichmäßige Übergänge von einem zum anderen. Füge in `.bb1a` eine `background`-Eigenschaft unter die `background-color`-Eigenschaft hinzu. Lege sie als einen Farbverlauf vom Typ `linear-gradient` fest, der als erste Farbe `--building-color1` und als zweite Farbe `--window-color1` verwendet.

 # --hints--

@@ -26,19 +26,19 @@ You should apply a `background` to `.bb1a` right after the `background-color`.
 assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
 ```

-You should give the `background` a `linear-gradient`.
+Du solltest dem `background` ein `linear-gradient` zuweisen.

 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
 ```

-You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
+Du solltest dem `background` ein `linear-gradient` zuweisen, der bei `var(--building-color1)` beginnt.

 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
 ```

-You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
+Du solltest dem `background` ein `linear-gradient` zuweisen, der mit `var(--window-color1)` endet.

 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
@@ -32,7 +32,7 @@ const main = document.querySelector('main');
 assert.equal(main?.previousElementSibling, null);
 ```

-Your `main` element's opening tag should be above the `h1` element. You have them in the wrong order.
+Das öffnende Tag deines `main`-Elements sollte über dem `h1`-Element stehen. You have them in the wrong order.

 ```js
 const collection = [...document.querySelectorAll('main,h1')].map(
@@ -7,11 +7,11 @@ dashedName: step-22

 # --description--

-After the unordered list, add a new image with an `src` attribute value set to:
+Füge nach der unsortierten Liste ein neues Bild mit einem `src`-Attribut mit dem folgenden Wert hinzu:

 `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`

-And its `alt` attribute value to:
+Und setze dessen Wert für das `alt`-Attribut auf:

 `A slice of lasagna on a plate.`

@@ -40,7 +40,7 @@ assert(
 );
 ```

-Das neue Bild besitzt kein `src`-Attribut. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
+Das neue Bild besitzt kein `src`-Attribut. Überprüfe, ob nach dem Namen des öffnenden Tags ein Leerzeichen steht und/oder ob vor allen Attributnamen Leerzeichen stehen.

 ```js
 assert($('section')[1].lastElementChild.hasAttribute('src'));
@@ -9,17 +9,17 @@ dashedName: step-40

 Platzhaltertext wird verwendet, um Personen einen Hinweis darauf zu geben, welche Art von Informationen sie in das Eingabefeld eintragen sollen. Zum Beispiel: `<input type="text" placeholder="Email address">`.

-Add the placeholder text `cat photo URL` to your `input` element.
+Füge den Platzhaltertext `cat photo URL` zu deinem `input`-Element hinzu.

 # --hints--

-You have either deleted your `input` element or it has invalid syntax. Alle Attributwerte sollten zwischen Anführungszeichen stehen.
+Du hast entweder dein `input`-Element gelöscht oder es hat eine ungültige Syntax. Alle Attributwerte sollten zwischen Anführungszeichen stehen.

 ```js
 assert($('input').length);
 ```

-Dein `form`-Element sollte nur das `input`-Element enthalten. Remove any additional HTML elements or text within the `form` element.
+Dein `form`-Element sollte nur das `input`-Element enthalten. Entferne alle zusätzlichen HTML-Elemente oder Text innerhalb des `form`-Elements.

 ```js
 assert(
@@ -28,13 +28,13 @@ assert(
 );
 ```

-Dein `input`-Element besitzt kein `placeholder`-Attribut. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
+Dein `input`-Element besitzt kein `placeholder`-Attribut. Überprüfe, ob nach dem Namen des öffnenden Tags ein Leerzeichen steht und/oder ob vor allen Attributnamen Leerzeichen stehen.

 ```js
 assert($('input')[0].hasAttribute('placeholder'));
 ```

-Your `input` element should have a `placeholder` attribute with the value `cat photo URL`.  Du hast entweder den Wert weggelassen oder einen Tippfehler gemacht. Denke daran, dass Attributwerte zwischen Anführungszeichen geschrieben werden sollten.
+Dein `input`-Element sollte ein `placeholder`-Attribut mit dem Wert `cat photo URL` enthalten.  Du hast entweder den Wert weggelassen oder einen Tippfehler gemacht. Denke daran, dass Attributwerte zwischen Anführungszeichen geschrieben werden sollten.

 ```js
 assert(
@@ -45,7 +45,7 @@ assert(
 );
 ```

-Although you have set the `input` element's `placeholder` attribute to `cat photo URL`, it is recommended to always surround the value of an attribute with quotation marks.
+Obwohl du das `placeholder`-Attribut des `input`-Elements auf `cat photo URL` gesetzt hast, wird empfohlen, den Wert eines Attributs immer mit Anführungszeichen zu umgeben.

 ```js
 assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
@@ -9,7 +9,7 @@ dashedName: step-48

 Beachte, dass beide Radio-Buttons gleichzeitig ausgewählt werden können. Damit beim Auswählen einer Optionsschaltfläche automatisch die andere abgewählt wird, müssen beide Buttons ein `name`-Attribut mit dem gleichen Wert haben.

-Add the `name` attribute with the value `indoor-outdoor` to both radio buttons.
+Füge das `name`-Attribut mit dem Wert `indoor-outdoor` für beide Radio-Buttons hinzu.

 # --hints--

@@ -39,7 +39,7 @@ const radioButtons = [...document.querySelectorAll('input')];
 assert(radioButtons.every((btn) => btn.hasAttribute('type')));
 ```

-Beide Radio-Buttons sollten ein `name`-Attribut mit dem Wert `indoor-outdoor` besitzen. You have either omitted the value or have a typo. Denke daran, dass Attributwerte zwischen Anführungszeichen stehen sollten.
+Beide Radio-Buttons sollten ein `name`-Attribut mit dem Wert `indoor-outdoor` besitzen. Du hast entweder den Wert weggelassen oder einen Tippfehler gemacht. Denke daran, dass Attributwerte zwischen Anführungszeichen stehen sollten.

 ```js
 const radioButtons = [...$('input[type="radio"]')];
@@ -7,7 +7,7 @@ dashedName: step-58

 # --description--

-Füge eine weitere Checkbox nach der soeben erstellten hinzu. The `id` attribute value should be `lazy` and the `name` attribute value should be the same as the last checkbox.
+Füge eine weitere Checkbox nach der soeben erstellten hinzu. Der Wert des `id`-Attributs sollte `lazy` sein und der Wert des `name`-Attributs sollte der gleiche Wert wie von der letzten Checkbox sein.

 Füge auch ein `label`-Element rechts neben der neuen Checkbox mit dem Text `Lazy` hinzu. Stelle sicher, dass das `label`-Element mit der neuen Checkbox verknüpft wird, indem du das `for`-Attribut verwendest.

@@ -50,7 +50,7 @@ assert(
 );
 ```

-The new `label` should have a `for` attribute with the same value as the `id` attribute of the new checkbox. Du hast entweder den Wert weggelassen oder dir ist ein Tippfehler unterlaufen.
+Das neue `label`-Element sollte ein `for`-Attribut mit dem gleichen Wert wie das `id`-Attribut der neuen Checkbox enthalten. Du hast entweder den Wert weggelassen oder dir ist ein Tippfehler unterlaufen.

 ```js
 assert(
@@ -7,7 +7,7 @@ dashedName: step-30

 # --description--

-To improve accessibility of the image you added, add an `alt` attribute with the text:
+Um die Zugänglichkeit des von dir hinzugefügten Bildes zu verbessern, fügst du ein `alt`-Attribut mit dem Text hinzu:

 `Five cats looking around a field.`

@@ -9,7 +9,7 @@ dashedName: step-43

 Even though you added your button below the text input, they appear next to each other on the page. That's because both `input` and `button` elements are <dfn>inline elements</dfn>, which don't appear on new lines.

-The button you added will submit the form by default. However, relying on default behavior may cause confusion. Add the `type` attribute with the value `submit` to the `button` to make it clear that it is a submit button.
+The button you added will submit the form by default. However, relying on default behavior may cause confusion. Füge das `type`-Attribut mit dem Wert `submit` zum `button` hinzu, um klarzustellen, dass es sich um einen Bestätigungsbutton handelt.

 # --hints--

@@ -11,7 +11,7 @@ Erstelle einen weiteren Radio-Button unterhalb des ersten. Verschachtle es in ei

 # --hints--

-Only the original `Indoor` radio button `input` should have an `id` set to `indoor`. Bei Bedarf kannst du den Schritt neu starten, um den ursprünglichen HTML-Code wiederherzustellen.
+Nur der ursprüngliche `Indoor`-Radio-Button-`input` sollte eine `id` mit dem Wert `indoor` enthalten. Bei Bedarf kannst du den Schritt neu starten, um den ursprünglichen HTML-Code wiederherzustellen.

 ```js
 assert(document.querySelectorAll('#indoor').length < 2);
@@ -41,13 +41,13 @@ Du solltest keine Attribute zum öffnenden `label`-Tag hinzufügen.
 assert(code.match(/<label\s*>/g).length === 2);
 ```

-Your new `input` should have an `id` attribute with the value `outdoor`.
+Dein neues `input`-Element sollte ein `id`-Attribut mit dem Wert `outdoor` enthalten.

 ```js
 assert(document.querySelector('label input[id="outdoor"]'));
 ```

-Your new `input` should have a `type` attribute with the value `radio`.
+Dein neues `input`-Element sollte ein `type`-Attribut mit dem Wert `radio` enthalten.

 ```js
 assert(document.querySelector('label input[id="outdoor"][type="radio"]'));
@@ -69,7 +69,7 @@ assert(
 );
 ```

-Der Text des Label-Elements deines neuen Radio-Buttons muss exakt `Outdoor` lauten. This includes capitalization.
+Der Text des Label-Elements deines neuen Radio-Buttons muss exakt `Outdoor` lauten. Dies schließt die Großschreibung ein.

 ```js
 assert(document.querySelector('label > input[id="outdoor"]')?.nextSibling?.nodeValue?.replace(/^\s+|\s+$/g, '') === 'Outdoor');
@@ -7,25 +7,25 @@ dashedName: step-16

 # --description--

-Before adding any new content, you should make use of a `section` element to separate the cat photos content from the future content.
+Bevor du neuen Inhalt hinzufügst, solltest du von einem `section`-Element Gebrauch machen, um die Katzenfotos vom zukünftigen Inhalt zu trennen.

 Take your `h2`, comment, `p`, and anchor (`a`) elements and nest them in a `section` element.

 # --hints--

-Your `section` element should have an opening tag. Öffnende Tags haben die folgende Syntax: `<elementName>`.
+Dein `section`-Element sollte ein öffnendes Tag enthalten. Öffnende Tags haben die folgende Syntax: `<elementName>`.

 ```js
 assert(document.querySelector('section'));
 ```

-Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character.
+Dein `section`-Element sollte ein abschließendes Tag enthalten. Abschließende Tags haben ein `/` direkt nach dem `<`-Zeichen.

 ```js
 assert(code.match(/<\/section\s*>/i));
 ```

-The entire `section` element should be between the opening and closing tags of the `main` element.
+Das ganze `section`-Element sollte sich zwischen dem öffnenden und abschließenden Tag des `main`-Elements befinden.

 ```js
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
@@ -17,7 +17,7 @@ Du solltest innerhalb des `body`-Elementselektors die `background-color` hinzuf
 assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor);
 ```

-You should give the `background-color` a value of `#1b1b32`.
+Du solltest der `background-color` den Wert `#1b1b32` zuweisen.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(27, 27, 50)');
@@ -29,7 +29,7 @@ Du solltest die `color` innerhalb des `body`-Elementselektors hinzufügen.
 assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.color);
 ```

-You should give the `color` a value of `#f5f6f7`.
+Du solltest der `color` den Wert `#f5f6f7` zuweisen.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245, 246, 247)');
@@ -17,7 +17,7 @@ Du solltest drei `fieldset`-Elemente hinzufügen.
 assert.equal(document.querySelectorAll('fieldset')?.length, 3);
 ```

-The three `fieldset` elements should be within the `form`.
+Die drei `fieldset`-Elemente sollten sich innerhalb des `form`-Elements befinden.

 ```js
 assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
@@ -9,7 +9,7 @@ dashedName: step-22

 Bestimmte `type`-Attributwerte besitzen eine eingebaute Formularprüfung. Zum Beispiel erfordert `type="email"`, dass der Wert eine gültige E-Mail-Adresse ist.

-Add custom validation to the password `input` element, by adding a `minlength` attribute with a value of `8`. Dadurch wird verhindert, dass Eingaben mit weniger als 8 Zeichen übermittelt werden.
+Füge eine benutzerdefinierte Überprüfung für das `input`-Passwort-Element hinzu, indem du ein `minlength`-Attribut mit einem Wert in Höhe von `8` hinzufügst. Dadurch wird verhindert, dass Eingaben mit weniger als 8 Zeichen übermittelt werden.

 # --hints--

@@ -19,7 +19,7 @@ Du solltest dem `input`-Passwort-Element ein `minlength`-Attribut zuweisen.
 assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1);
 ```

-You should give the `minlength` attribute a value of `8`.
+Du solltest dem `minlength`-Attribut einen Wert in Höhe von `8` zuweisen.

 ```js
 assert.equal(document.querySelector('input[type="password"]')?.minLength, 8);
@@ -7,7 +7,7 @@ dashedName: step-26

 # --description--

-For the terms and conditions, add an `input` with a `type` of `checkbox` to the third `label` element. Stelle dieses `input`-Element auf `required` ein, da Benutzer sich nicht registrieren sollten, ohne die Nutzungsbedingung zu lesen.
+Füge für die Nutzungsbedingungen ein `input`-Element mit einem `type` von `checkbox` zum dritten `label`-Element hinzu. Stelle dieses `input`-Element auf `required` ein, da Benutzer sich nicht registrieren sollten, ohne die Nutzungsbedingung zu lesen.

 # --hints--

@@ -9,17 +9,17 @@ dashedName: step-28

 Es soll jeweils nur eine Radio-Input-Element gleichzeitig wählbar sein. Allerdings weiß das Formular nicht, dass die Radio-Input-Elemente miteinander verbunden sind.

-To relate the radio inputs, give them the same `name` attribute with a value of `account-type`. Now, it is not possible to select both radio inputs at the same time.
+Um die Radio-Input-Elemente miteinander zu verbinden, weise ihnen das gleiche `name`-Attribut mit dem Wert `account-type` zu. Es ist jetzt nicht mehr möglich, beide Radio-Input-Elemente gleichzeitig auszuwählen.

 # --hints--

-You should give the first radio input the `name` attribute with a value of `account-type`.
+Du solltest dem ersten Radio-Input-Element das `name`-Attribut mit dem Wert `account-type` zuweisen.

 ```js
 assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type');
 ```

-You should give the second radio input the `name` attribute with a value of `account-type`.
+Du solltest dem zweiten Radio-Input-Element das `name`-Attribut mit dem Wert `account-type` zuweisen.

 ```js
 assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type');
@@ -7,7 +7,7 @@ dashedName: step-43

 # --description--

-Center the `h1` and `p` elements by giving them a `margin` of `1em auto`. Richte dann auch ihren Text mit `center` aus.
+Zentriere die `h1`- und `p`-Elemente, indem du ihnen eine `margin` mit dem Wert `1em auto` zuweist. Richte dann auch ihren Text mit `center` aus.

 # --hints--

@@ -17,13 +17,13 @@ Du solltest einen Elementselektor, der mit Kommas getrennt ist, verwenden, um di
 assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p'));
 ```

-You should use a `margin` of `1em auto` to center the `h1` and `p` elements.
+Du solltest eine `margin` mit dem Wert `1em auto` verwenden, um die `h1`- und `p`-Elemente zu zentrieren.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto');
 ```

-You should use a `text-align` of `center` to center the `h1` and `p` text.
+Du solltest `text-align` mit dem Wert `center` verwenden, um die `h1`- und `p`-Texte zu zentrieren.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center');
@@ -11,7 +11,7 @@ Es wäre besser, wenn der `label`-Text über den Formularelementen erscheinen w

 Wähle alle `input`-, `textarea`- und `select`-Elemente aus und lasse sie die volle Breite ihrer Elternelemente einnehmen.

-Also, add `10px` of `margin` to the top of the selected elements. Setze die anderen Margins auf `0`.
+Füge ebenfalls eine `margin`-Eigenschaft mit dem Wert `10px` oben bei den ausgewählten Elementen hinzu. Setze die anderen Margins auf `0`.

 # --hints--

@@ -19,7 +19,7 @@ Du solltest deine `min-height`-Eigenschaft und den Wert in den `input, textarea,
 assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight);
 ```

-You should give the `input, textarea, select` selector a `min-height` of `2em`.
+Du solltest dem `input, textarea, select`-Selektor eine `min-height` mit dem Wert `2em` zuweisen.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em');
@@ -17,13 +17,13 @@ You should only create 1 additional `div` element.
 assert(document.querySelectorAll('div').length === 3);
 ```

-Your new `div` element should be nested in your `.characters` element.
+Dein neues `div`-Element sollte in deinem `.characters`-Element eingebettet sein.

 ```js
 assert(document.querySelector('.characters div'));
 ```

-Your new `div` element should have an `id` of `offwhite-character`.
+Dein neues `div`-Element sollte eine `id` mit dem Wert `offwhite-character` enthalten.

 ```js
 assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character');
@@ -17,13 +17,13 @@ Dein `#gray-mask`-Selektor sollte eine `position`-Eigenschaft mit dem Wert `abso
 assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute');
 ```

-Your `#gray-mask` selector should have a `top` property set to `-10px`.
+Dein `#gray-mask`-Selektor sollte eine `top`-Eigenschaft mit dem Wert `-10px` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px');
 ```

-Your `#gray-mask` selector should have a `left` property set to `70px`.
+Dein `#gray-mask`-Selektor sollte eine `left`-Eigenschaft mit dem Wert `70px` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px');
@@ -7,7 +7,7 @@ dashedName: step-56

 # --description--

-Füge unter deinen `.blue`-Elementen einen weiteren `div` hinzu. Give it the `id` value of `orange-character`.
+Füge unter deinen `.blue`-Elementen einen weiteren `div` hinzu. Weise ihm `orange-character` als `id`-Wert zu.

 # --hints--

@@ -17,7 +17,7 @@ Du solltest innerhalb deines `.characters`-Elements ein neues `div`-Element habe
 assert(document.querySelectorAll('.characters > div')?.length === 5);
 ```

-Your new `div` element should have the `id` set to `orange-character`.
+Dein neues `div`-Element sollte die `id` auf `orange-character` gesetzt haben.

 ```js
 assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character');
@@ -11,19 +11,19 @@ Give the `#orange-character` element a `position` of `absolute`, a `top` of `25%

 # --hints--

-Your `#orange-character` selector should have a `position` property set to `absolute`.
+Dein `#orange-character`-Selektor sollte eine `position`-Eigenschaft mit dem Wert `absolute` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute');
 ```

-Your `#orange-character` selector should have a `top` property set to `25%`.
+Dein `#orange-character`-Selektor sollte eine `top`-Eigenschaft mit dem Wert `25%` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%');
 ```

-Your `#orange-character` selector should have a `left` property set to `40%`.
+Dein `#orange-character`-Selektor sollte eine `left`-Eigenschaft mit dem Wert `40%` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%');
@@ -17,19 +17,19 @@ Du solltest einen `#guitar-neck`-Selektor erstellen.
 assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck'));
 ```

-Your `#guitar-neck` selector should have a `width` property set to `200px`.
+Dein `#guitar-neck`-Selektor sollte eine `width`-Eigenschaft mit dem Wert `200px` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px');
 ```

-Your `#guitar-neck` selector should have a `height` property set to `30px`.
+Dein `#guitar-neck`-Selektor sollte eine `height`-Eigenschaft mit dem Wert `30px` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px');
 ```

-Your `#guitar-neck` selector should have a `background-color` property set to `#D2691E`.
+Dein `#guitar-neck`-Selektor sollte eine `background-color`-Eigenschaft mit dem Wert `#D2691E` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)');
@@ -19,7 +19,7 @@ Du solltest einen `.fas`-Selektor erstellen.
 assert(new __helpers.CSSHelp(document).getStyle('.fas'));
 ```

-Your `.fas` selector should have a `font-size` property set to `30px`.
+Dein `.fas`-Selektor sollte eine `font-size`-Eigenschaft auf `30px` gesetzt haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px');
@@ -104,13 +104,13 @@ Dein `link`-Element sollte sich innerhalb deines `head`-Elements befinden.
 assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
 ```

-Your `link` element should have a `rel` attribute with the value `stylesheet`.
+Dein `link`-Element sollte ein `rel`-Attribut mit dem Wert `stylesheet` enthalten.

 ```js
 assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
 ```

-Your `link` element should have an `href` attribute with the value `styles.css`.
+Dein `link`-Element sollte ein `href`-Attribut mit dem Wert `styles.css` enthalten.

 ```js
 assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
@@ -19,7 +19,7 @@ Dein `thead`-Element sollte ein `tr`-Element enthalten.
 assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
 ```

-Your `tr` element should have a `td` element as the first child.
+Dein `tr`-Element sollte ein `td`-Element als erstes untergeordnetes Element enthalten.

 ```js
 assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
@@ -7,7 +7,7 @@ dashedName: step-12

 # --description--

-Füge innerhalb deines `tbody`-Elements vier `tr`-Elemente hinzu. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`.
+Füge innerhalb deines `tbody`-Elements vier `tr`-Elemente hinzu. Gib den ersten drei ein `class`-Attribut mit dem Wert `data` und dem vierten ein `class`-Attribut mit dem Wert `total`.

 # --hints--

@@ -31,7 +31,7 @@ Du solltest den Text `Funds set aside for emergencies.` mit einem `span`-Element
 assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
 ```

-Your `span` element should have the `class` attribute set to `description`.
+Dein `span`-Element sollte das `class`-Attribut enthalten, dem der Wert `description` zugewiesen ist.

 ```js
 assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
@@ -7,7 +7,7 @@ dashedName: step-18

 # --description--

-Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements.
+Within your `thead`, add a `tr`. Füge in diesem ein `td`-Element und drei `th`-Elemente hinzu.

 # --hints--

@@ -17,7 +17,7 @@ Dein `thead`-Element sollte ein `tr`-Element enthalten.
 assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
 ```

-Your `tr` element should have a `td` element as the first child.
+Dein `tr`-Element sollte ein `td`-Element als erstes untergeordnetes Element enthalten.

 ```js
 assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
@@ -7,13 +7,13 @@ dashedName: step-27

 # --description--

-Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`.
+Füge innerhalb des `tbody` ein `tr` mit der `class` `total` hinzu. Füge darin ein `th` mit dem Text `Total Net Worth` hinzu und bette `Net Worth` in ein `span` mit der `class` `sr-only` ein.

-Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`.
+Füge dann drei `td`-Elemente hinzu und weise dem dritten eine `class` mit dem Wert `current` zu und weise jedem Element den folgenden Text zu: `$-171`, `$136`, `$334`.

 # --hints--

-Your `tbody` element should have one `tr` element.
+Dein `tbody`-Element sollte ein `tr`-Element enthalten.

 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
@@ -25,19 +25,19 @@ Dein `tr`-Element sollte die `class` auf `total` eingestellt haben.
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
 ```

-Your `tr` should have a `th` element.
+Dein `tr` sollte ein `th`-Element enthalten.

 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
 ```

-Your `th` element should have the text `Total Net Worth`.
+Dein `th`-Element sollte den Text `Total Net Worth` enthalten.

 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
 ```

-You should wrap the text `Net Worth` in a `span` element.
+Du solltest den Text `Net Worth` in einem `span`-Element einbetten.

 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
@@ -49,25 +49,25 @@ Dein `span`-Element sollte das `class`-Attribut auf `sr-only` eingestellt haben.
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
 ```

-You should have three `td` elements.
+Du solltest drei `td`-Elemente haben.

 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
 ```

-Your first `td` element should have the text `$-171`.
+Dein erstes `td`-Element sollte den Text `$-171` enthalten.

 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
 ```

-Your second `td` element should have the text `$136`.
+Dein zweites `td`-Element sollte den Text `$136` enthalten.

 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
 ```

-Your third `td` element should have the text `$334`.
+Dein drittes `td`-Element sollte den Text `$334` enthalten.

 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
@@ -7,7 +7,7 @@ dashedName: step-28

 # --description--

-Zeit deine Tabelle zu gestalten. Beginne mit dem Zurücksetzen des Box-Modells. Create an `html` selector and give it a `box-sizing` property set to `border-box`.
+Zeit deine Tabelle zu gestalten. Beginne mit dem Zurücksetzen des Box-Modells. Erstelle einen `html`-Selektor und weise ihm eine `box-sizing`-Eigenschaft mit dem Wert `border-box` zu.

 # --hints--

@@ -17,7 +17,7 @@ Du solltest einen `html`-Selektor haben.
 assert(new __helpers.CSSHelp(document).getStyle('html'));
 ```

-Your `html` selector should have a `box-sizing` property set to `border-box`.
+Dein `html`-Selektor sollte eine `box-sizing`-Eigenschaft mit dem Wert `border-box` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
@@ -7,7 +7,7 @@ dashedName: step-39

 # --description--

-You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Setze die `margin`-Eigenschaft auf `0 auto`, um ihn zu zentrieren und setze die `border`-Eigenschaft auf `2px solid #d0d0d5`.
+You wrapped your table in a section element - now you can style that to give your table a border. Erstelle einen `section`-Selektor und weise ihm eine `max-width`-Eigenschaft mit dem Wert `40rem` zu, um ein responsives Design zu erstellen. Setze die `margin`-Eigenschaft auf `0 auto`, um ihn zu zentrieren und setze die `border`-Eigenschaft auf `2px solid #d0d0d5`.

 # --hints--

@@ -17,19 +17,19 @@ Du solltest einen `section`-Selektor haben.
 assert(new __helpers.CSSHelp(document).getStyle('section'));
 ```

-Your `section` selector should have a `max-width` property set to `40rem`.
+Dein `section`-Selektor sollte eine `max-width`-Eigenschaft mit dem Wert `40rem` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
 ```

-Your `section` selector should have a `margin` property set to `0 auto`.
+Dein `section`-Selektor sollte eine `margin`-Eigenschaft mit dem Wert `0 auto` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
 ```

-Your `section` selector should have a `border` property set to `2px solid #d0d0d5`.
+Dein `section`-Selektor sollte eine `border`-Eigenschaft mit dem Wert `2px solid #d0d0d5` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
@@ -16,17 +16,17 @@ Die `calc()`-Funktion ist eine CSS-Funktion, die dir erlaubt, einen Wert zu bere
 }
 ```

-Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+Weise `#years` eine `margin` mit dem Wert `0 -2px` und ein `padding` mit dem Wert `0.5rem calc(1.25rem + 2px) 0.5rem 0` zu.

 # --hints--

-Your `#years` selector should have a `margin` property set to `0 -2px`.
+Dein `#years`-Selektor sollte eine `margin`-Eigenschaft besitzen, die auf `0 -2px` eingestellt ist.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
 ```

-Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+Dein `#years`-Selektor sollte eine `padding`-Eigenschaft besitzen, die auf `0.5rem calc(1.25rem + 2px) 0.5rem 0` eingestellt ist.

 ```js
 const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
@@ -9,7 +9,7 @@ dashedName: step-44

 Gestalte den Text innerhalb deines `#years`-Elements, indem du einen `#years span[class]`-Selektor erstellst. Die `span[class]`-Syntax wird jedes `span`-Element auswählen, das ein `class`-Attribut besitzt, unabhängig vom Wert des Attributs.

-Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to the right.
+Weise deinem neuen Selektor eine `bold`-Schrift, eine Breite von `4.5rem` und einen Text zu, der rechts ausgerichtet ist.

 # --hints--

@@ -19,19 +19,19 @@ Du solltest einen `#years span[class]`-Selektor haben.
 assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
 ```

-Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
+Dein `#years span[class]`-Selektor sollte eine `font-weight`-Eigenschaft mit dem Wert `bold` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
 ```

-Your `#years span[class]` selector should have a `width` property set to `4.5rem`.
+Dein `#years span[class]`-Selektor sollte eine `width`-Eigenschaft mit dem Wert `4.5rem` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
 ```

-Your `#years span[class]` selector should have a `text-align` property set to `right`.
+Dein `#years span[class]`-Selektor sollte eine `text-align`-Eigenschaft mit dem Wert `right` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
@@ -1,6 +1,6 @@
 ---
 id: 62017b6f47454059bf2d3bd1
-title: Step 46
+title: Schritt 46
 challengeType: 0
 dashedName: step-46
 ---
@@ -1,6 +1,6 @@
 ---
 id: 62017f47c87be96457c49f46
-title: Step 47
+title: Schritt 47
 challengeType: 0
 dashedName: step-47
 ---
@@ -35,49 +35,49 @@ const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?
 assert(text.includes('clip-path: inset(50%) !important;'));
 ```

-Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`.
+Bei deinem `span[class~="sr-only"]`-Selektor sollte die `height`-Eigenschaft auf `1px !important` eingestellt sein.

 ```js
 const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
 assert(text.includes('height: 1px !important;'));
 ```

-Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`.
+Bei deinem `span[class~="sr-only"]`-Selektor sollte die `width`-Eigenschaft auf `1px !important` eingestellt sein.

 ```js
 const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
 assert(text.includes('width: 1px !important;'));
 ```

-Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`.
+Bei deinem `span[class~="sr-only"]`-Selektor sollte die `position`-Eigenschaft auf `absolute !important` eingestellt sein.

 ```js
 const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
 assert(text.includes('position: absolute !important;'));
 ```

-Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`.
+Bei deinem `span[class~="sr-only"]`-Selektor sollte die `overflow`-Eigenschaft auf `hidden !important` eingestellt sein.

 ```js
 const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
 assert(text.includes('overflow: hidden !important;'));
 ```

-Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`.
+Bei deinem `span[class~="sr-only"]`-Selektor sollte die `white-space`-Eigenschaft auf `nowrap !important` eingestellt sein.

 ```js
 const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
 assert(text.includes('white-space: nowrap !important;'));
 ```

-Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`.
+Bei deinem `span[class~="sr-only"]`-Selektor sollte die `padding`-Eigenschaft auf `0 !important` eingestellt sein.

 ```js
 const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
 assert(text.includes('padding: 0px !important;'));
 ```

-Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`.
+Bei deinem `span[class~="sr-only"]`-Selektor sollte die `margin`-Eigenschaft auf `-1px !important` eingestellt sein.

 ```js
 const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
@@ -1,6 +1,6 @@
 ---
 id: 62017fa5bbef406580ceb44f
-title: Step 48
+title: Schritt 48
 challengeType: 0
 dashedName: step-48
 ---
@@ -11,7 +11,7 @@ Ensure your table fills its container with a `width` property set to `100%`, the

 # --hints--

-Your `table` selector should have a `width` property set to `100%`.
+Dein `table`-Selektor sollte eine `width`-Eigenschaft mit dem Wert `100%` enthalten.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
@@ -1,6 +1,6 @@
 ---
 id: 620186f4b6b8356d2def576b
-title: Step 51
+title: Schritt 51
 challengeType: 0
 dashedName: step-51
 ---
@@ -1,6 +1,6 @@
 ---
 id: 62018ba1aa263770c953be66
-title: Step 52
+title: Schritt 52
 challengeType: 0
 dashedName: step-52
 ---
@@ -1,6 +1,6 @@
 ---
 id: 62018c3e94434a71af1d5eaa
-title: Step 53
+title: Schritt 53
 challengeType: 0
 dashedName: step-53
 ---
@@ -1,6 +1,6 @@
 ---
 id: 62018ec29b3ae674f40bef31
-title: Step 54
+title: Schritt 54
 challengeType: 0
 dashedName: step-54
 ---
@@ -1,6 +1,6 @@
 ---
 id: 62019093fe30e278e797d2f6
-title: Step 55
+title: Schritt 55
 challengeType: 0
 dashedName: step-55
 ---
@@ -1,6 +1,6 @@
 ---
 id: 620192a767533a7ad19d96d7
-title: Step 57
+title: Schritt 57
 challengeType: 0
 dashedName: step-57
 ---
@@ -1,6 +1,6 @@
 ---
 id: 6201995d9ab88e80f1989dce
-title: Step 58
+title: Schritt 58
 challengeType: 0
 dashedName: step-58
 ---
@@ -1,6 +1,6 @@
 ---
 id: 6201a1a7af32c287bd6b8183
-title: Step 60
+title: Schritt 60
 challengeType: 0
 dashedName: step-60
 ---
@@ -1,6 +1,6 @@
 ---
 id: 6201a1cc668a34888f5b2f52
-title: Step 61
+title: Schritt 61
 challengeType: 0
 dashedName: step-61
 ---
@@ -1,6 +1,6 @@
 ---
 id: 6201a20d742f5c89736c8cfb
-title: Step 62
+title: Schritt 62
 challengeType: 0
 dashedName: step-62
 ---
@@ -1,6 +1,6 @@
 ---
 id: 6201a42e39bf3b95b6a33bf3
-title: Step 63
+title: Schritt 63
 challengeType: 0
 dashedName: step-63
 ---
@@ -1,6 +1,6 @@
 ---
 id: 6201a4adcc6414968b391592
-title: Step 64
+title: Schritt 64
 challengeType: 0
 dashedName: step-64
 ---
@@ -1,6 +1,6 @@
 ---
 id: 6201a5258af7b398b030bfaf
-title: Step 65
+title: Schritt 65
 challengeType: 0
 dashedName: step-65
 ---
@@ -1,6 +1,6 @@
 ---
 id: 6201a59be346d399c21d10b1
-title: Step 66
+title: Schritt 66
 challengeType: 0
 dashedName: step-66
 ---
@@ -1,6 +1,6 @@
 ---
 id: 64076bbeba941114b0027b6a
-title: Step 43
+title: Schritt 43
 challengeType: 0
 dashedName: step-43
 ---
@@ -37,7 +37,7 @@ Du solltest die `DOCTYPE`-Deklaration mit einem `>` nach dem Typ schließen.
 assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
 ```

-Your `html` element should have an opening tag with a `lang` attribute of `en`.
+Dein `html`-Element sollte ein öffnendes Tag mit einem `lang`-Attribut mit dem Wert `en` enthalten.

 ```js
 assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
--- a/Show More
+++ b/Show More