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

2026-09-24 23:01:18 +08:00 · 2023-06-09 07:57:55 +02:00
parent 167a8e7638
commit b5bc83d3c1
26 changed files with 83 additions and 83 deletions
@@ -9,7 +9,7 @@ dashedName: step-1

 Beginne mit deinem standardmäßigen HTML-Boilerplate-Code. Füge eine `DOCTYPE`-Deklaration, ein `html`-Element, ein `head`-Element und ein `body`-Element hinzu.

-Add the `lang` attribute to the opening `<html>` tag with `en` set as the value.
+Füge das `lang`-Attribut zum öffnenden `<html>`-Tag mit dem Wert `en` hinzu.

 # --hints--

@@ -25,7 +25,7 @@ Du solltest nach der `DOCTYPE`-Referenz ein Leerzeichen einfügen.
 assert(code.match(/<!DOCTYPE\s+/gi));
 ```

-You should define `html` as the document type.
+Du solltest definieren, dass `html` der Dokumententyp ist.

 ```js
 assert(code.match(/<!DOCTYPE\s+html/gi));
@@ -49,7 +49,7 @@ Dein `html`-Element sollte ein schließendes Tag haben.
 assert(code.match(/<\/html\s*>/));
 ```

-Your opening `<html>` tag should have the `lang` attribute with `en` as the value.
+Dein öffnendes `<html>`-Tag sollte das `lang`-Attribut mit dem Wert `en` haben.

 ```js
 assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/));
@@ -19,7 +19,7 @@ Du solltest ein `header`-Element innerhalb deines `body`-Elements haben.
 assert.exists(document.querySelector('body')?.querySelector('header'));
 ```

-Your `header` element should have a `class` with `header` as the value.
+Dein `header`-Element sollte eine `class` mit `header` als Wert haben.

 ```js
 assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
@@ -7,7 +7,7 @@ dashedName: step-5

 # --description--

-Below your `.header` element, create a new `div` element and assign it a `class` of `gallery`. Dieses `div`-Element dient als Container für die Galeriebilder.
+Erstelle unter deinem `.header`-Element ein neues `div`-Element und gib ihm eine `class` von `gallery`. Dieses `div`-Element dient als Container für die Galeriebilder.

 Erstelle innerhalb deines `.gallery`-Elements neun `img`-Elemente.

@@ -19,7 +19,7 @@ Du solltest ein `div`-Element in deinem `body`-Element erstellen.
 assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
 ```

-Your new `div` element should have a `class` with `gallery` set as the value.
+Dein neues `div`-Element sollte eine `class` mit `gallery` als Wert haben.

 ```js
 assert(document.querySelector('body')?.querySelector('.gallery'));
@@ -7,7 +7,7 @@ dashedName: step-6

 # --description--

-Gib als Nächstes jedem `img` ein `src`-Attribut entsprechend seiner Reihenfolge im Dokument. The first `img` should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. The rest should be the same, except replace the `1` with the number the `img` is in the document.
+Gib als Nächstes jedem `img` ein `src`-Attribut entsprechend seiner Reihenfolge im Dokument. Das erste `img` sollte einen `src` von `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` haben. Der Rest sollte der gleiche sein, außer das `1` durch die Nummer ersetzt werden soll, die `img` im Dokument hat.

 # --hints--

@@ -18,55 +18,55 @@ const images = [...document.querySelectorAll('img')];
 assert(images.every(image => image.getAttribute('src')));
 ```

-Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
+Dein neues `img`-Element sollte `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` als `src`-Attributwert gesetzt haben.

 ```js
 assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
 ```

-Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
+Dein zweites `img`-Element sollte `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` als `src`-Attribut gesetzt haben.

 ```js
 assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
 ```

-Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
+Dein drittes `img`-Element sollte `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` als `src`-Attribut gesetzt haben.

 ```js
 assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
 ```

-Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
+Dein viertes `img`-Element sollte `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` als `src`-Attributwert gesetzt haben.

 ```js
 assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
 ```

-Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
+Dein fünftes `img`-Element sollte `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` als `src`-Attributwert gesetzt haben.

 ```js
 assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
 ```

-Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
+Dein sechstes `img`-Element sollte `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` als `src`-Attributwert gesetzt haben.

 ```js
 assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
 ```

-Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
+Dein siebtes `img`-Element sollte `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` als `src`-Attributwert gesetzt haben.

 ```js
 assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
 ```

-Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
+Dein achtes `img`-Element sollte `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` als `src`-Attributwert gesetzt haben.

 ```js
 assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
 ```

-Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
+Dein neuntes `img`-Element sollte `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` als `src`-Attributwert gesetzt haben.

 ```js
 assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
@@ -7,7 +7,7 @@ dashedName: step-7

 # --description--

-Normalize your box model by creating a `*` selector and setting the `box-sizing` property to `border-box` as the value.
+Normalisiere dein Box-Modell, indem du einen `*`-Selektor erstellst und die `box-sizing`-Eigenschaft auf den Wert `border-box` einstellst.

 # --hints--

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

-Your `*` selector should have a `box-sizing` property set to `border-box` as the value.
+Dein `*`-Selektor sollte eine `box-sizing`-Eigenschaft von `border-box` als Wert haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
@@ -7,7 +7,7 @@ dashedName: step-9

 # --description--

-Remove the margin from your `body` element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
+Entferne den Rand aus deinem `body`-Element, setze die `font-family` auf `sans-serif` und gib ihm die `background-color` mit dem Wert `#f5f6f7`.

 # --hints--

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

-Your `body` selector should have a `margin` property set to `0` as the value.
+Dein `body`-Selektor sollte eine `margin`-Eigenschaft mit dem Wert `0` haben.

 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
@@ -26,13 +26,13 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px'
 assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
 ```

-Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
+Dein `body`-Selektor sollte eine `font-family`-Eigenschaft mit dem Wert `sans-serif` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
 ```

-Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
+Dein `body`-Selektor sollte eine `background-color`-Eigenschaft mit dem Wert `#f5f6f7` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
@@ -7,7 +7,7 @@ dashedName: step-10

 # --description--

-Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
+Richte deinen `.header`-Text mittig aus. Schreibe den Text in Großbuchstaben unter der Verwendung der `text-transform`-Eigenschaft mit dem Wert `uppercase`.

 Gib ihm auf allen Seiten ein Padding von `32px`. Setze die Farbwerte des Hintergrundes auf `#0a0a23` und des Textes auf `#fff`.

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

-Your `.header` selector should have a `text-align` property set to `center` as the value.
+Dein `.header`-Selektor sollte eine `text-align`-Eigenschaft mit dem Wert `center` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
 ```

-Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
+Dein `.header`-Selektor sollte eine `text-transform`-Eigenschaft mit dem Wert `uppercase` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
 ```

-Your `.header` selector should have a `padding` property set to `32px` as the value.
+Dein `.header`-Selektor sollte eine `padding`-Eigenschaft mit dem Wert `32px` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
@@ -18,7 +18,7 @@ Flexbox hat eine Haupt- und Querachse. Die Hauptachse wird durch die `flex-direc

 Teste verschiedene Werte, um zu sehen, wie sie das Layout beeinflussen.

-When you are done, set an explicit `flex-direction` of `row` on the `.gallery` element.
+Sobald du fertig bist, weise dem `.gallery`-Element eine explizite `flex-direction` mit dem Wert `row` zu.

 # --hints--

@@ -11,7 +11,7 @@ dashedName: step-13
 Die `flex-wrap`-Eigenschaft legt fest, wie sich deine Flex-Elemente verhalten, wenn der Flex-Container zu klein ist. Wenn du den Wert auf `wrap` einstellst, werden die Elemente in die nächste Zeile oder Spalte umgebrochen. Wenn nötig verhindert `nowrap` (standardmäßig) das Umbrechen oder Schrumpfen der Elemente.


-Make it so your flex items wrap to the next row when they run out of space.
+Sorge dafür, dass deine beweglichen Elemente in die nächste Zeile wandern, wenn sie keinen Platz mehr haben.

 # --hints--

@@ -7,13 +7,13 @@ dashedName: step-14

 # --description--

-The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
+Die `justify-content`-Eigenschaft bestimmt, wie die Elemente innerhalb eines Flex-Containers entlang der Hauptachse positioniert werden, was sich auf ihre Position und den Raum um sie herum auswirkt.

-Give your `.gallery` selector a `justify-content` property with `center` as the value.
+Gib deinem `.gallery`-Selektor eine `justify-content`-Eigenschaft mit dem Wert `center`.

 # --hints--

-Your `.gallery` selector should have a `justify-content` property set to `center` as the value.
+Dein `.gallery`-Selektor sollte eine `justify-content`-Eigenschaft mit dem Wert `center` haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
@@ -9,7 +9,7 @@ dashedName: step-16

 Gib deinem `.gallery`-Selektor eine `padding`-Eigenschaft von `20px 10px`, um Platz um den Container herum zu schaffen.

-Then, give it a `max-width` of `1400px` and add a `margin` of `0 auto` to center it.
+Gib ihm dann eine `max-width` von `1400px` und füge eine `margin` von `0 auto` hinzu, um ihn zu zentrieren.

 # --hints--

@@ -28,7 +28,7 @@ Dein `.gallery`-Selektor sollte eine `max-width`-Eigenschaft mit `1400px` als We
 assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
 ```

-Your `.gallery` element should be centered using a `margin` with `0 auto` as the value.
+Dein `.gallery`-Element sollte zentriert werden, indem eine `margin` mit `0 auto` als Wert verwendet wird.

 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
@@ -13,7 +13,7 @@ Gib deinem `.gallery img`-Selektor die `object-fit`-Eigenschaft und setze ihn au

 # --hints--

-Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value.
+Dein `.gallery img`-Selektor sollte eine `object-fit`-Eigenschaft von `cover` als Wert haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
@@ -7,15 +7,15 @@ dashedName: step-18

 # --description--

-Your images need some space between them.
+Deine Bilder benötigen etwas Abstand dazwischen.

-The `gap` CSS shorthand property sets the gaps, also knowns as gutters, between rows and columns. The `gap` property and its `row-gap` and `column-gap` sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.
+Die `gap`-CSS Eigenschaft setzt die Lücken fest, die auch als Zwischenraum zwischen den Zeilen und Spalten bekannt sind. Die `gap`-Eigenschaft und ihre `row-gap` und `column-gap`-Untereigenschaften bieten diese Funktionalität dem Flex-, Gitter- und Mehrspalten-Layout. Du wendest die Eigenschaft auf das Containerelement an.

-Give your `.gallery` flex container a `gap` property with `16px` as the value.
+Gib deinem `.gallery`-Flexcontainer eine `gap`-Eigenschaft mit `16px` als Wert.

 # --hints--

-Your `.gallery` selector should have a `gap` property with `16px` set as the value.
+Dein `.gallery`-Selektor sollte eine `gap`-Eigenschaft mit `16px` als Wert haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
@@ -7,11 +7,11 @@ dashedName: step-19

 # --description--

-Smooth out your images a bit by giving the `.gallery img` selector a `border-radius` property with `10px` set as the value.
+Glätte deine Bilder ein wenig, indem du dem `.gallery img`-Selektor eine `border-radius`-Eigenschaft mit `10px` als Wert gibst.

 # --hints--

-Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value.
+Dein `.gallery img` Selektor sollte eine `border-radius` Eigenschaft mit `10px` als Wert haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
@@ -7,9 +7,9 @@ dashedName: step-20

 # --description--

-The `::after` pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
+Das `::after` Pseudo-Element erstellt ein Element, das das letzte untergeordnete Element des ausgewählten Elements ist. Du kann es verwenden, um ein leeres Element nach dem letzten Bild hinzuzufügen. Wenn du ihm die gleiche `width` wie den Bildern gibst, wird es das letzte Bild nach links schieben, im Falle, dass die Galerie ein zweispaltiges Layout hat. Momentan befindet es sich in der Mitte, da du auf dem Flex-Container `justify-content: center` eingestellt hast.

-Example:
+Beispiel:

 ```CSS
 .container::after {
@@ -18,7 +18,7 @@ Example:
 }
 ```

-Create a new selector using an `::after` pseudo-element on the `.gallery` element. Add a `content` property set to an empty string `""` and `350px` set for the `width` property.
+Erstelle einen neuen Selektor, indem du ein `::after` Pseudo-Element auf dem `.gallery` Element verwendest. Add a `content` property set to an empty string `""` and `350px` set for the `width` property.

 # --hints--

@@ -8,14 +8,14 @@ dashedName: step-21
 # --description--


-The `alt` image attribute should describe the image content. Screenreader beziehen sich auf den alternativen Text anstelle der Bilder. If the image can't be loaded, this text is presented in place of the image.
+Das `alt`-Bildatttribut sollte den Bildinhalt beschreiben. Screenreader beziehen sich auf den alternativen Text anstelle der Bilder. Wenn das Bild nicht geladen werden kann, wird dieser Text anstelle des Bildes angezeigt.

-To complete the project, add an `alt` attribute to all nine of your cat images to describe them. Use a value at least five characters long for each.
+Füge zum Abschluss des Projekts allen neun Katzen-Bildern ein `alt`-Attribut hinzu, um sie zu beschreiben. Verwende für jeden einen Wert von mindestens fünf Zeichen.


 # --hints--

-All nine of your `img` elements should have a `alt` attribute with text describing each image, with each description using at least `5` letters.
+Alle neun deiner `img`-Elemente sollten ein `alt`-Attribut mit Text haben, das jedes Bild beschreibt und dabei mindestens `5` Buchstaben verwendet.

 ```js
 const images = [...document.querySelectorAll('img')];
@@ -7,31 +7,31 @@ dashedName: step-8

 # --description--

-Deine Bilder sind zu groß. Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px` so they shrink as needed but don't get too big.
+Deine Bilder sind zu groß. Erstelle einen `.gallery img`-Selektor, um sie zu bestimmen. Gib ihnen allen eine `width` von `100%` und eine `max-width` von `350px`, so dass sie bei Bedarf schrumpfen, aber nicht zu groß werden.

-Also set the `height` property to `300px` to keep your images a uniform size.
+Setze ebenfalls die `height`-Eigenschaft auf `300px`, damit die Bilder eine einheitliche Größe haben.

 # --hints--

-You should have a `.gallery img` selector.
+Du solltest einen `.gallery img`-Selektor haben.

 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
 ```

-Your `.gallery img` selector should have a `width` property set to `100%` as the value.
+Dein `.gallery img`-Selektor sollte eine `width`-Eigenschaft mit `100%` als Wert haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
 ```

-Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
+Dein `.gallery img`-Selektor sollte eine `max-width`-Eigenschaft mit `350px` als Wert haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
 ```

-Your `.gallery img` selector should have a `height` property set to `300px` as the value.
+Dein `.gallery img`-Selektor sollte eine `height`-Eigenschaft mit `300px` als Wert haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
@@ -7,7 +7,7 @@ dashedName: step-18

 # --description--

-Erstelle unter deinem `.text`-Element ein neues `section`-Element und gib ihm eine `class` von `text text-with-images`. Within that, create an `article` element with a `class` set to `brief-history`, and an `aside` element with the `class` set to `image-wrapper`.
+Erstelle unter deinem `.text`-Element ein neues `section`-Element und gib ihm eine `class` von `text text-with-images`. Erstelle darin ein `article`-Element mit der `class` auf `brief-history` gesetzt und einem `aside`-Element mit der `class` auf `image-wrapper` gesetzt.

 # --hints--

@@ -7,41 +7,41 @@ dashedName: step-22

 # --description--

-Within the `.image-wrapper` element, give your first `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`, an `alt` of `image of the quote machine project`, a `class` of `image-1`, a `loading` attribute set to `lazy`, a `width` attribute of `600`, and a `height` attribute of `400`.
+Gib innerhalb des `.image-wrapper`-Elements deinem ersten `img`-Element ein `src` von `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`, ein `alt` von `image of the quote machine project`, eine `class` von `image-1`, ein `loading`-Attribut gesetzt auf `lazy`, ein `width`-Attribut von `600` und ein `height`-Attribut von `400`.

 # --hints--

-Your first `img` element should have a `src` attribute set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`.
+Dein erstes `img`-Element sollte ein `src`-Attribut von `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png` haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png');
 ```

-Your first `img` element should have an `alt` attribute set to `image of the quote machine project`.
+Dein erstes `img`-Element sollte ein `alt`-Attribut von `image of the quote machine project` haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('alt') === 'image of the quote machine project');
 ```

-Your first `img` element should have a `class` attribute set to `image-1`.
+Dein erstes `img`-Element sollte ein `class`-Attribut von `image-1` haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[0]?.classList?.contains('image-1'));
 ```

-Your first `img` element should have a `loading` attribute set to `lazy`.
+Dein erstes `img`-Element sollte ein `loading`-Attribut von `lazy` haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('loading') === 'lazy');
 ```

-Your first `img` element should have a `width` attribute set to `600`.
+Dein erstes `img`-Element sollte ein `width`-Attribut von `600` haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('width') === '600');
 ```

-Your first `img` element should have a `height` attribute set to `400`.
+Dein erstes `img`-Element sollte ein `height`-Attribut von `400` haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('height') === '400');
@@ -7,7 +7,7 @@ dashedName: step-23

 # --description--

-Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of a calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`.
+Gib innerhalb deines `.image-wrapper`-Elements dem zweiten `img`-Element ein `src`-Attribut mit dem Wert `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, ein `alt`-Attribut mit dem Wert `image of a calculator project`, ein `loading`-Attribut mit dem Wert `lazy`, ein `class`-Attribut mit dem Wert `image-2`, ein `width`-Attribut mit dem Wert `400` und ein `height`-Attribut mit dem Wert `400`.

 # --hints--

@@ -7,41 +7,41 @@ dashedName: step-24

 # --description--

-Within your `.image-wrapper` element, give your third `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`, an `alt` of `four people working on code`, a `loading` attribute of `lazy`, a `class` set to `image-3`, a `width` attribute set to `600`, and a `height` attribute set to `400`.
+Gib innerhalb deines `.image-wrapper`-Elements deinem dritten `img`-Element einen `src` mit dem Wert `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`, einen `alt` mit dem Wert `four people working on code`, ein `loading`-Attribut mit dem Wert `lazy`, eine `class` mit dem Wert `image-3`, ein `width`-Attribut mit dem Wert `600`, und ein `height`-Attribut mit dem Wert `400`.

 # --hints--

-Your third `img` element should have a `src` set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`.
+Dein drittes `img`-Element sollte ein `src` auf `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg` gesetzt haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg');
 ```

-Your third `img` element should have an `alt` set to `four people working on code`.
+Dein drittes `img`-Element sollte das `alt` auf `four people working on code` gesetzt haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('alt') === 'four people working on code');
 ```

-Your third `img` element should have a `loading` attribute set to `lazy`.
+Dein drittes `img`-Element sollte ein `loading`-Attribut auf `lazy` gesetzt haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('loading') === 'lazy');
 ```

-Your third `img` element should have a `class` set to `image-3`.
+Dein drittes `img`-Element sollte eine `class` auf `image-3` gesetzt haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[2]?.classList?.contains('image-3'));
 ```

-Your third `img` element should have a `width` attribute set to `600`.
+Dein drittes `img`-Element sollte ein `width`-Attribut auf `600` gesetzt haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('width') === '600');
 ```

-Your third `img` element should have a `height` attribute set to `400`.
+Dein drittes `img`-Element sollte ein `height`-Attribut auf `400` gesetzt haben.

 ```js
 assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('height') === '400');
@@ -7,7 +7,7 @@ dashedName: step-25

 # --description--

-Bette innerhalb deines `.image-quote`-Elements ein `hr`-Element, ein `p`-Element und ein zweites `hr`-Element ein. Give the `p` element a `class` set to `quote` and the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`.
+Bette innerhalb deines `.image-quote`-Elements ein `hr`-Element, ein `p`-Element und ein zweites `hr`-Element ein. Gib dem `p`-Element ein `class`-Attribut mit dem Wert `quote` und weise ihm den Text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.` zu.

 # --hints--

@@ -7,31 +7,31 @@ dashedName: step-26

 # --description--

-To start your CSS, normalize the CSS rules by targeting all elements with `*`, including the `::before` and `::after` pseudo-selectors.
+Um dein CSS zu starten, normalisiere die CSS-Regeln, indem du alle Elemente mit `*` auswählst, einschließlich der `::before` und `::after` Pseudo-Selektoren.

-Set the `padding` and `margin` properties both to `0` and set the `box-sizing` property to `border-box`.
+Setze sowohl die `padding`- als auch die `margin`-Eigenschaften auf `0` und setze die `box-sizing`-Eigenschaft auf `border-box`.

 # --hints--

-You should have a `*, ::before, ::after` selector.
+Du solltest einen `*, ::before, ::after`-Selektor haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
 ```

-Your `*, ::before, ::after` selector should have a `padding` property set to `0`.
+Dein `*, ::before, ::after`-Selektor sollte eine `padding`-Eigenschaft auf `0` gesetzt haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.padding === '0px');
 ```

-Your `*, ::before, ::after` selector should have a `margin` property set to `0`.
+Dein `*, ::before, ::after`-Selektor sollte eine `margin`-Eigenschaft auf `0` gesetzt haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.margin === '0px');
 ```

-Your `*, ::before, ::after` selector should have a `box-sizing` property set to `border-box`.
+Dein `*, ::before, ::after`-Selektor sollte eine `box-sizing`-Eigenschaft auf `border-box` gesetzt haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'border-box');
@@ -7,30 +7,30 @@ dashedName: step-28

 # --description--

-Create a `body` selector. Set the `font-family` property to `Baskervville`, with a fallback of `serif`. Set the `color` property to `linen` and the `background-color` property to `rgb(20, 30, 40)`.
+Erstelle einen `body`-Selektor. Setze die `font-family`-Eigenschaft von `Baskervville` mit einem Fallback von `serif`. Setze die `color`-Eigenschaft auf `linen` und die `background-color`-Eigenschaft auf `rgb(20, 30, 40)`.

 # --hints--

-You should have a `body` selector.
+Du solltest einen `body`-Selektor haben.

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

-Your `body` selector should have a `font-family` property set to `Baskervville`, with a fallback of `serif`.
+Dein `body`-Selektor sollte eine `font-family`-Eigenschaft von `Baskervville` mit einem Fallback von `serif` haben.

 ```js
 const fontFamily = new __helpers.CSSHelp(document).getStyle('body')?.fontFamily;
 assert(fontFamily === 'Baskervville, serif' || fontFamily === `"Baskervville", serif`);
 ```

-Your `body` selector should have a `color` property set to `linen`.
+Dein `body`-Selektor sollte eine `color`-Eigenschaft auf `linen` gesetzt haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'linen');
 ```

-Your `body` selector should have a `background-color` property set to `rgb(20, 30, 40)`.
+Dein `body`-Selektor sollte eine `background-color`-Eigenschaft auf `rgb(20, 30, 40)` gesetzt haben.

 ```js
 assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(20, 30, 40)');
@@ -7,11 +7,11 @@ dashedName: step-43

 # --description--

-You should remove the temporary `width` attribute before writing the CSS for your `.hero-img`.
+Du solltest das temporäre `width`-Attribut entfernen, bevor du das CSS für dein `.hero-img` schreibst.

 # --hints--

-Your `.hero-img` should not have a `width` attribute.
+Dein `.hero-img` sollte kein `width`-Attribut haben.

 ```js
 assert.isNull(document.querySelector('.hero-img')?.getAttribute('width'));
@@ -23,7 +23,7 @@ Então podemos chamar o `testFun` dessa forma: `testFun("Hello", "World");`. Pas

 # --instructions--

-<ol><li>Crie uma função chamada <code>functionWithArgs</code> que aceita dois argumentos e exibe seus valores no console de desenvolvimento.</li><li>Chame a função com dois números como argumentos.</li></ol>
+<ol><li>Crie uma função chamada <code>functionWithArgs</code> que aceita dois argumentos e exibe a soma de seus valores no console de desenvolvimento.</li><li>Chame a função com dois números como argumentos.</li></ol>

 # --hints--