diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md index df246c615ad..c5e584a4eb7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md @@ -7,104 +7,104 @@ dashedName: step-1 # --description-- -Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element specifying this page is in English, a `head` element, and a `body` element. +Beginne mit deinem standardmäßigen HTML-Boilerplate. Füge eine `DOCTYPE`-Deklaration ein, ein `html`-Element, das angibt, dass diese Seite auf Eglisch ist, ein `head`-Element und ein `body`-Element. -Add a `` tag with the appropriate `charset` and a `` tag for mobile responsiveness within the `head` element. +Füge innerhalb des `head`-Elements ein ``-Tag mit dem entsprechenden `charset` und ein ``-Tag für mobile Reaktionsfähigkeit hinzu. # --hints-- -Your code should contain the `DOCTYPE` reference. +Dein Code sollte die `DOCTYPE`-Referenz beinhalten. ```js assert(code.match(/` after the type. +Du solltest die `DOCTYPE`-Deklaration mit einem `>` nach dem Typ schließen. ```js assert(code.match(//gi)); ``` -You should have an opening `` tag, and it should have `lang` of `en`. +Du solltest ein öffnendes ``-Tag haben und es sollte eine `lang` von `en` haben. ```js assert(code.match(//gi)); ``` -Your `html` element should have a closing tag. +Dein `html`-Element sollte ein abschließendes Tag haben. ```js assert(code.match(/<\/html\s*>/)); ``` -Your `DOCTYPE` declaration should be at the beginning of your HTML. +Deine `DOCTYPE`-Deklaration sollte am Anfang deines HTML stehen. ```js assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); ``` -You should have an opening `` tag. +Du solltest ein öffnendes ``-Tag haben. ```js assert(code.match(//i)); ``` -You should have a closing `` tag. +Du solltest ein abschließendes ``-Tag haben. ```js assert(code.match(/<\/head\s*>/i)); ``` -You should have an opening `` tag. +Du solltest ein öffnendes ``-Tag haben. ```js assert(code.match(//i)); ``` -You should have a closing `` tag. +Du solltest ein abschließendes ``-Tag haben. ```js assert(code.match(/<\/body\s*>/i)); ``` -The `head` and `body` elements should be siblings. +Deine `head` und `body`-Elemente sollten Geschwister sein. ```js assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); ``` -The `head` element should be within the `html` element. +Das `head`-Element sollte sich innerhalb des `html`-Elements befinden. ```js assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); ``` -The `body` element should be within the `html` element. +Das `body`-Element sollte sich innerhalb des `html`-Elements befinden. ```js assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); ``` -You should have two `meta` elements. +Du solltest zwei `meta`-Elemente haben. ```js const meta = document.querySelectorAll('meta'); assert(meta?.length === 2); ``` -One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. +Ein `meta`-Element sollte einen `name` mit `viewport` haben und `content` mit dem Wert `width=device-width, initial-scale=1.0` haben. ```js const meta = [...document.querySelectorAll('meta')]; @@ -112,7 +112,7 @@ const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getA assert.exists(target); ``` -The other `meta` element should have the `charset` attribute set to `UTF-8`. +Das andere `meta`-Element sollte das `charset`-Attribut auf `UTF-8` gesetzt haben. ```js const meta = [...document.querySelectorAll('meta')]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md index d97547ba812..d991fd6a0e7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md @@ -7,7 +7,7 @@ dashedName: step-3 # --description-- -Erstelle innerhalb von `body` ein `main`-Element. Then in that element, create a `section` with a `class` set to `heading`. +Erstelle innerhalb von `body` ein `main`-Element. Erstelle dann in diesem Element eine `section` mit einer `class`, die auf `heading` gesetzt ist. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md index ebfbd7f3cb9..1278f1f2627 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md @@ -7,13 +7,13 @@ dashedName: step-4 # --description-- -Within your `.heading` element, create a `header` element with the `class` set to `hero`. +Erstelle innerhalb des `.heading`-Elements ein `header`-Element mit `hero` als Wert für die `class`. -In that element, create an `img` element with the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`, the `alt` set to `freecodecamp logo`, and the `class` set to `hero-img`. +Erstelle innerhalb dieses Elements ein `img`-Element mit `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png` als Wert für die `src`, mit `freecodecamp logo` als Wert für `alt` und mit `hero-img` als Wert für die `class`. -Das `loading`-Attribut bei einem `img`-Element kann auf `lazy` gesetzt werden, um dem Browser mitzuteilen, dass er die Bildressource nicht abrufen soll, bis sie benötigt wird (d. h., wenn der Benutzer scrollt und das Bild in der Ansicht erscheint). As an additional benefit, lazy loaded elements will not load until the non-lazy elements are loaded - this means users with slow internet connections can view the content of your page without having to wait for the images to load. +Das `loading`-Attribut bei einem `img`-Element kann auf `lazy` gesetzt werden, um dem Browser mitzuteilen, dass er die Bildressource nicht abrufen soll, bis sie benötigt wird (d. h., wenn der Benutzer scrollt und das Bild in der Ansicht erscheint). Ein weiterer Vorteil liegt darin, dass "lazy-geladene" Elemente erst dann geladen werden, wenn die "non-lazy" Elemente geladen sind - das bedeutet, dass Nutzer mit langsamen Internetverbindungen den Inhalt deiner Seite sehen können, ohne auf das Laden der Bilder warten zu müssen. -Give your new `img` element a `loading` attribute set to `lazy`. +Weise deinem neuen `img`-Element ein `loading`-Attribut zu, dass auf `lazy` eingestellt ist. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md index 6a44159af45..4e6f56aaf9e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md @@ -7,94 +7,94 @@ dashedName: step-7 # --description-- -After your `header` element, create a `div` with the `class` set to `author`. +Erstelle nach deinem `header`-Element einen `div` mit der `class` auf `author` gesetzt. -Within that `div`, create a `p` element with the `class` set to `author-name` and give it the text `By freeCodeCamp`. Wrap the `freeCodeCamp` portion in an `a` element with the `href` set to `https://freecodecamp.org`, and the `target` set to `_blank`. +Erstelle in diesem `div` ein `p`-Element mit der `class` auf `author-name` gesetzt und gib ihm den Text `By freeCodeCamp`. Schließe den `freeCodeCamp` Teil in einem `a`-Element ein, indem du `href` auf `https://freecodecamp.org` und das `target` auf `_blank` setzt. -Below that, add a second `p` element with the class `publish-date` and the text `March 7, 2019`. +Füge unter dieses ein zweites `p`-Element mit der Klasse `publish-date` und dem Text `March 7, 2019` hinzu. # --hints-- -You should create a new `div` element. +Du solltest ein neues `div`-Element erstellen. ```js assert.exists(document.querySelector('div')); ``` -Your `div` element should come after your `header` element. +Dein `div`-Element sollte nach deinem `header`-Element stehen. ```js assert(document.querySelector('div')?.previousElementSibling?.localName === 'header'); ``` -Your `div` element should have the `class` set to `author`. +Dein `div`-Element sollte die `class` auf `author` gesetzt haben. ```js assert(document.querySelector('div')?.className === 'author'); ``` -You should create two new `p` elements. +Du solltest zwei neue `p`-Elemente erstellen. ```js assert(document.querySelectorAll('p')?.length === 3); ``` -Your two new `p` elements should be within your `div` element. +Deine zwei neuen `p`-Elemente sollten sich innerhalb deines `div`-Elements befinden. ```js assert.exists(document.querySelector('div')?.querySelectorAll('p')?.length === 2); ``` -Your first new `p` element should have a `class` set to `author-name`. +Dein erstes neues `p`-Element sollte eine `class` auf `author-name` gesetzt haben. ```js assert(document.querySelector('div')?.querySelector('p')?.className === 'author-name'); ``` -Your first new `p` element should have the text `By freeCodeCamp`. +Dein erstes neues `p`-Element sollte den Text `By freeCodeCamp` haben. ```js assert(document.querySelector('div')?.querySelector('p')?.innerText === 'By freeCodeCamp'); ``` -Your second new `p` element should have a `class` set to `publish-date`. +Dein zweites neues `p`-Element sollte eine `class` auf `publish-date` gesetzt haben. ```js assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.className === 'publish-date'); ``` -Your second new `p` element should have the text `March 7, 2019`. +Dein zweites neues `p`-Element sollte den Text `March 7, 2019` enthalten. ```js assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.innerText === 'March 7, 2019'); ``` -You should create a new `a` element. +Du solltest ein neues `a`-Element erstellen. ```js assert.exists(document.querySelector('a')); ``` -Your `a` element should be within your first new `p` element. +Dein `a`-Element sollte sich innerhalb deines ersten neuen `p`-Elements befinden. ```js assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.localName === 'a'); ``` -Your `a` element should have the `href` set to `https://freecodecamp.org`. +Dein `a`-Element sollte den `href` auf `https://freecodecamp.org` gesetzt haben. ```js assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('href') === 'https://freecodecamp.org'); ``` -Your `a` element should have the `target` set to `_blank`. +Dein `a`-Element sollte den `target` auf `_blank` gesetzt haben. ```js assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('target') === '_blank'); ``` -Your `a` element should surround the text `freeCodeCamp`. +Dein `a`-Element sollte den Text `freeCodeCamp` umschließen. ```js assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.textContent === 'freeCodeCamp'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md index 5dbc44f1a2e..a03b6dd1861 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md @@ -7,67 +7,67 @@ dashedName: step-9 # --description-- -Below your `.author` element, create a new `div` element with the class `social-icons`. +Erstelle unter deinem `.author`-Element ein neues `div`-Element mit der Klasse `social-icons`. -Add five `a` elements within that new `div`, and give them the following `href` attributes. +Füge in diesem neuen `div` fünf `a`-Elemente hinzu und gib ihnen die folgenden `href`-Attribute. -- The first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`. -- The second `a` element should have an `href` set to `https://twitter.com/freecodecamp`. -- The third `a` element should have an `href` set to `https://instagram.com/freecodecamp`. -- The fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`. -- The fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`. +- Das erste `a`-Element sollte einen `href` von `https://www.facebook.com/freecodecamp` haben. +- Dein zweites `a`-Element sollte einen `href` von `https://twitter.com/freecodecamp` haben. +- Dein drittes `a`-Element sollte einen `href` von `https://instagram.com/freecodecamp` haben. +- Dein viertes `a`-Element sollte einen `href` von `https://www.linkedin.com/school/free-code-camp` haben. +- Dein fünftes `a`-Element sollte einen `href` von `https://www.youtube.com/freecodecamp` haben. # --hints-- -You should create a new `div` element. +Du solltest ein neues `div`-Element erstellen. ```js assert(document.querySelectorAll('div')?.length === 2); ``` -Your new `div` element should come after your `.author` element. +Dein neues `div`-Element sollte nach deinem `.author`-Element stehen. ```js assert(document.querySelector('.author')?.nextElementSibling?.localName === 'div'); ``` -Your new `div` element should have the class `social-icons`. +Dein neues `div`-Element sollte die Klasse `social-icons` haben. ```js assert(document.querySelector('.author')?.nextElementSibling?.classList?.contains('social-icons')); ``` -Your `.social-icons` element should have five `a` elements. +Dein `.social-icons`-Element sollte fünf `a`-Elemente haben. ```js assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.length === 5); ``` -Your first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`. +Dein erstes `a`-Element sollte ein `href` von `https://www.facebook.com/freecodecamp` haben. ```js assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[0]?.getAttribute('href')?.includes('https://www.facebook.com/freecodecamp')); ``` -Your second `a` element should have an `href` set to `https://twitter.com/freecodecamp`. +Dein zweites `a`-Element sollte einen `href` von `https://twitter.com/freecodecamp` haben. ```js assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href'), 'https://twitter.com/freecodecamp'); ``` -Your third `a` element should have an `href` set to `https://instagram.com/freecodecamp`. +Dein drittes `a`-Element sollte einen `href` von `https://instagram.com/freecodecamp` haben. ```js assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href'), 'https://instagram.com/freecodecamp'); ``` -Your fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`. +Dein viertes `a`-Element sollte einen `href` von `https://www.linkedin.com/school/free-code-camp` haben. ```js assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href'), 'https://www.linkedin.com/school/free-code-camp'); ``` -Your fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`. +Dein fünftes `a`-Element sollte einen `href` von `https://www.youtube.com/freecodecamp` haben. ```js assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href'), 'https://www.youtube.com/freecodecamp'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md index 60d2542db00..dea411d753e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md @@ -7,61 +7,61 @@ dashedName: step-10 # --description-- -Within each of your new `a` elements, add an `i` element and give them the following classes: +Füge in jedes deiner neuen `a`-Elemente ein `i`-Element hinzu und gib ihnen die folgenden Klassen: -- Your first `i` element should have the class `fab fa-facebook-f` -- Your second `i` element should have the class `fab fa-twitter` -- Your third `i` element should have the class `fab fa-instagram` -- Your fourth `i` element should have the class `fab fa-linkedin-in` -- Your fifth `i` element should have the class `fab fa-youtube` +- Dein erstes `i`-Element sollte die Klasse `fab fa-facebook-f` haben +- Dein zweites `i`-Element sollte die Klasse `fab fa-twitter` haben +- Dein drittes `i`-Element sollte die Klasse `fab fa-instagram` haben +- Dein viertes `i`-Element sollte die Klasse `fab fa-linkedin-in` haben +- Dein fünftes `i`-Element sollte die Klasse `fab fa-youtube` haben # --hints-- -You should have five `i` elements. +Du solltest fünf `i`-Elemente haben. ```js assert(document.querySelectorAll('i')?.length === 5); ``` -Each `a` element should only have one `i` element. +Jedes `a`-Element sollte nur ein `i`-Element haben. ```js const aaaaa = [...document.querySelectorAll('.social-icons a')]; assert(aaaaa?.every(a => a?.children?.length === 1 && a?.children?.[0]?.localName === 'i')); ``` -Each `i` element should have a `class` attribute which includes `fab`. +Jedes `i`-Element sollte ein `class`-Attribut haben, welches `fab` enthält. ```js const iiiii = [...document.querySelectorAll('i')]; assert(iiiii?.every(i => i?.classList?.contains('fab'))); ``` -The first `i` element should have a `class` attribute which includes `fa-facebook-f`. +Das erste `i`-Element sollte ein `class`-Attribut haben, welches `fa-facebook-f` enthält. ```js assert(document.querySelectorAll('i')?.[0]?.classList?.contains('fa-facebook-f')); ``` -The second `i` element should have a `class` attribute which includes `fa-twitter`. +Das zweite `i`-Element sollte ein `class`-Attribut haben, welches `fa-twitter` enthält. ```js assert(document.querySelectorAll('i')?.[1]?.classList?.contains('fa-twitter')); ``` -The third `i` element should have a `class` attribute which includes `fa-instagram`. +Das dritte `i`-Element sollte ein `class`-Attribut haben, welches `fa-instagram` enthält. ```js assert(document.querySelectorAll('i')?.[2]?.classList?.contains('fa-instagram')); ``` -The fourth `i` element should have a `class` attribute which includes `fa-linkedin-in`. +Das vierte `i`-Element sollte ein `class`-Attribut haben, welches `fa-linkedin-in` enthält. ```js assert(document.querySelectorAll('i')?.[3]?.classList?.contains('fa-linkedin-in')); ``` -The fifth `i` element should have a `class` attribute which includes `fa-youtube`. +Das fünfte `i`-Element sollte ein `class`-Attribut haben, welches `fa-youtube` enthält. ```js assert(document.querySelectorAll('i')?.[4]?.classList?.contains('fa-youtube')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md index 61f9d94e962..d4901de02e5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -Below your `.heading` element, create a new `section` element with the `class` set to `text`. Within that, create a `p` element with the `class` set to `first-paragraph` and the following text: +Erstelle unterhalb deines `.heading`-Elements ein neues `section`-Element mit `text` als Wert für die `class`. Erstelle innerhalb dieses Elements ein `p`-Element mit `first-paragraph` als Wert für die `class` und mit dem folgenden Text: ```markup Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. @@ -27,7 +27,7 @@ Dein neues `section`-Element sollte nach deinem `.heading`-Element kommen. assert(document.querySelectorAll('section')?.[1]?.previousElementSibling?.className === 'heading'); ``` -Your new `section` element should have the `class` set to `text`. +Dein neues `section`-Element sollte die `class` auf `text` gesetzt haben. ```js assert(document.querySelectorAll('section')?.[1]?.className === 'text'); @@ -39,7 +39,7 @@ Du solltest innerhalb deines `.text`-Elements ein neues `p`-Element erstellen. assert(document.querySelector('.text')?.querySelectorAll('p')?.length === 1); ``` -Your new `p` element should have the `class` set to `first-paragraph`. +Dein neues `p`-Element sollte die `class` auf `first-paragraph` gesetzt haben. ```js assert(document.querySelector('.text p')?.className === 'first-paragraph'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md index ec8c3d45586..9af89841b6f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Create another `p` element below your `.first-paragraph` element, and give it the following text: +Erstelle unterhalb deines `.first-paragraph`-Elements ein weiteres `p`-Element und weise ihm folgenden Text zu: ```markup After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md index 1ef7d125ec5..c33c5c529fd 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md @@ -17,7 +17,7 @@ Du solltest einen `h1`-Selektor haben. assert(new __helpers.CSSHelp(document).getStyle('h1')); ``` -Your `h1` selector should have a `font-family` property set to `Anton` with the fallback of `sans-serif`. +Dein `h1`-Selektor sollte eine `font-family`-Eigenschaft mit dem Wert `Anton` zusammen mit `sans-serif` als Fallback-Wert enthalten. ```js const fontFamily = new __helpers.CSSHelp(document).getStyle('h1')?.fontFamily; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md index 6184f44e930..99abb315527 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md @@ -7,23 +7,23 @@ dashedName: step-31 # --description-- -Create an `a` selector, and give it a `text-decoration` property set to `none` and a `color` property set to `linen`. +Erstelle ein `a`-Selektor und gib ihm eine `text-decoration`-Eigenschaft mit `none` und eine `color`-Eigenschaft mit `linen`. # --hints-- -You should have an `a` selector. +Du solltest einen `a`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('a')); ``` -Your `a` selector should have a `text-decoration` property set to `none`. +Dein `a`-Selektor sollte eine `text-decoration`-Eigenschaft mit `none` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none'); ``` -Your `a` selector should have a `color` property set to `linen`. +Dein `a`-Selektor sollte eine `color`-Eigenschaft mit `linen` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('a')?.color === 'linen'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md index 8c7f3af5929..fe7c9f29419 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md @@ -7,13 +7,13 @@ dashedName: step-33 # --description-- -Now you can style the layout of your grid. CSS Grid is similar to Flexbox in that it has a special property for both the parent and child elements. +Nun kannst du das Layout deines Gitters gestalten. Das CSS-Gitter ist der Flexbox ähnlich, da es eine spezielle Eigenschaft für übergeordnete und untergeornete Elemente hat. -In this case, your parent element is the `main` element. Set the content to have a three-column layout by adding a `grid-template-columns` property with a value of `1fr 94rem 1fr`. This will create three columns where the middle column is `94rem` wide, and the first and last columns are both 1 fraction of the remaining space in the grid container. +In diesem Fall ist dein übergeordnetes Element das `main`-Element. Lege den Inhalt so fest, dass er ein dreispaltiges Layout hat, indem du eine `grid-template-columns`-Eigenschaft mit einem Wert von `1fr 94rem 1fr` hinzufügst. Dies wird drei Spalten erstellen, wobei die mittlere Spalte `94rem` breit ist und sowohl die erste als auch die letzte Spalte 1 Bruchteil des verbleibenden Platzes im Gitter-Container sind. # --hints-- -Your `main` section should have a `grid-template-columns` property set to `1fr 94rem 1fr`. +Dein `main`-Abschnitt sollte eine `grid-template-columns`-Eigenschaft auf `1fr 94rem 1fr` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === '1fr 94rem 1fr'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md index 06cf96680af..a51205fba93 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md @@ -7,13 +7,13 @@ dashedName: step-34 # --description-- -Use the `minmax` function to make your columns responsive on any device. The `minmax` function takes two arguments, the first being the minimum value and the second being the maximum. These values could be a length, percentage, `fr`, or even a keyword like `max-content`. +Verwende die `minmax`-Funktion, um deine Spalten auf jedem Gerät reaktionsfähig zu machen. Die `minmax`-Funktion nimmt zwei Argumente, zum einen den Mindestwert und zum anderen das Maximum. Diese Werte können eine Länge, Prozentsatz, `fr` oder sogar ein Schlüsselwort wie `max-content` sein. -Wrap each of your already defined values of the `grid-template-columns` property in a `minmax` function, using each value as the second argument. The first argument should be `2rem`, `min-content`, and `2rem` respectively. +Umbreche jedes deiner bereits definierten Werte der `grid-template-columns`-Eigenschaft in einer `minmax` Funktion, indem jeder Wert als zweites Argument verwendet wird. Das erste Argument sollte `2rem`, `min-content` und beziehungsweise `2rem` sein. # --hints-- -Your `main` selector should have a `grid-template-columns` property set to `minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)`. +Dein `main`-Selektor sollte eine `grid-template-columns`-Eigenschaft von `minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === 'minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md index 09a669cf377..5a0fe5b821a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md @@ -7,11 +7,11 @@ dashedName: step-35 # --description-- -To add space between rows in the grid layout, you can use the `row-gap` property. Give the `main` selector a `row-gap` property of `3rem`. +Um Abstand zwischen den Zeilen im Gitterlayout hinzuzufügen, kannst du die `row-gap`-Eigenschaft verwenden. Gib dem `main`-Selektor eine `row-gap`-Eigenschaft von `3rem`. # --hints-- -Your `main` selector should have a `row-gap` property of `3rem`. +Dein `main`-Selektor sollte eine `row-gap`-Eigenschaft von `3rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('main')?.rowGap === '3rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md index 8c78b79c256..ac1d7835101 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md @@ -7,21 +7,21 @@ dashedName: step-36 # --description-- -Your magazine will have three primary sections. You already set the overall layout in the `main` rule, but you can adjust the placement in the child rules. +Dein Magazin wird drei Hauptteile enthalten. Du hast bereits das Gesamtlayout in der `main`-Regel festgelegt, aber du kannst die Platzierung in den untergeordneten Regeln anpassen. -One option is the `grid-column` property, which is shorthand for `grid-column-start` and `grid-column-end`. The `grid-column` property tells the grid item which grid line to start and end at. +Eine Option ist die `grid-column`-Eigenschaft, die das Kürzel für `grid-column-start` und `grid-column-end` ist. Die `grid-column`-Eigenschaft teilt dem Gitterelement mit, bei welcher Gitterlinie gestartet und beendet werden soll. -Create a `.heading` rule and set the `grid-column` property to `2 / 3`. This will tell the `.heading` element to start at grid line 2 and end at grid line 3. +Erstelle eine `.heading`-Regel und setze die `grid-column`-Eigenschaft auf `2 / 3`. Dies wird dem `.heading` mitteilen, dass es bei der Gitterlinie 2 beginnen soll und an der Gitterlinie 3 enden soll. # --hints-- -You should have a `.heading` selector. +Du solltest einen `.heading`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.heading')); ``` -Your `.heading` selector should have a `grid-column` property set to `2 / 3`. +Dein `.heading`-Selektor sollte eine `grid-column`-Eigenschaft auf `2 / 3` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridColumn === '2 / 3'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md index 9a939a87138..4b4d0d46830 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md @@ -7,17 +7,17 @@ dashedName: step-37 # --description-- -Create a `.text` selector and give it a `grid-column` property set to `2 / 3`. +Erstelle einen `.text`-Selektor und gib ihm eine `grid-column`-Eigenschaft von `2 / 3`. # --hints-- -You should have a `.text` selector. +Du solltest einen `.text`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')); ``` -Your `.text` selector should have a `grid-column` property set to `2 / 3`. +Dein `.text`-Selektor sollte eine `grid-column`-Eigenschaft von `2 / 3` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.gridColumn === '2 / 3'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md index b17581b337f..3431b1eb809 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md @@ -7,15 +7,15 @@ dashedName: step-39 # --description-- -Now you can style the content of the `.heading` element with CSS Grid. +Nun kannst du den Inhalt des `.heading`-Elements mit dem CSS-Gitter gestalten. -The CSS `repeat()` function is used to repeat a value, rather than writing it out manually, and is helpful for grid layouts. For example, setting the `grid-template-columns` property to `repeat(20, 200px)` would create 20 columns each `200px` wide. +Die `repeat()` CSS-Funktion wird verwendet, um einen Wert zu wiederholen, anstatt ihn manuell auszuschreiben und ist hilfreich für das Layout des Gitters. Zum Beispiel, würde das Einstellen der `grid-template-columns`-Eigenschaft auf `repeat(20, 200px)` 20 Spalten mit einer Breite von jeweils `200px` erstellen. -Give your `.heading` element a `grid-template-columns` property set to `repeat(2, 1fr)` to create two columns of equal width. +Gib deinem `.heading`-Element eine `grid-template-columns`-Eigenschaft von `repeat(2, 1fr)`, um zwei Spalten gleicher Breite zu erstellen. # --hints-- -Your `.heading` selector should have a `grid-template-columns` property set to `repeat(2, 1fr)`. +Dein `.heading`-Selektor sollte eine `grid-template-columns`-Eigenschaft auf `repeat(2, 1fr)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridTemplateColumns === 'repeat(2, 1fr)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md index 90a0d6a9de3..cf5aaba259d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md @@ -7,11 +7,11 @@ dashedName: step-40 # --description-- -Give your `.heading` selector a `row-gap` property set to `1.5rem`. +Gib deinem `.heading`-Selektor eine `row-gap`-Eigenschaft von `1.5rem`. # --hints-- -Your `.heading` selector should have a `row-gap` property set to `1.5rem`. +Dein `.heading`-Selektor sollte eine `row-gap`-Eigenschaft haben, die auf `1.5rem` gesetzt ist. ```js assert(new __helpers.CSSHelp(document).getStyle('.heading')?.rowGap === '1.5rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md index 9b0b6d8fdfd..0299568d93d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md @@ -7,19 +7,19 @@ dashedName: step-41 # --description-- -Remember that the `grid-column` property determines which columns an element starts and ends at. There may be times where you are unsure of how many columns your grid will have, but you want an element to stop at the last column. To do this, you can use `-1` for the end column. +Denke daran, dass die `grid-column`-Eigenschaft bestimmt, in welchen Spalten ein Element startet und endet. Es wird Momente geben, in denen du dir nicht sicher bist, wie viele Spalten dein Raster haben wird, du aber möchtest, dass ein Element an der letzten Spalte endet. Um dies zu tun, kannst du zum Beenden der Spalte `-1` verwenden. -Create a `.hero` selector and give it a `grid-column` property set to `1 / -1`. This will tell the element to span the full width of the grid. +Erstelle einen `.hero`-Selektor und gebe ihm eine `grid-column`-Eigenschaft von `1 / -1`. Dies gibt an das Element weiter, die volle Breite des Rasters zu umfassen. # --hints-- -You should have a `.hero` selector. +Du solltest einen `.hero`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero')); ``` -Your `.hero` selector should have a `grid-column` property set to `1 / -1`. +Dein `.hero`-Selektor sollte eine `grid-column`-Eigenschaft von `1 / -1` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero')?.gridColumn === '1 / -1'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md index 0f704bc07fd..6c4b13843b0 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md @@ -7,11 +7,11 @@ dashedName: step-42 # --description-- -Give the `.hero` selector a `position` property set to `relative`. +Gib dem `.hero`-Selektor eine `position`-Eigenschaft, die auf `relative` gesetzt ist. # --hints-- -Your `.hero` selector should have a `position` property set to `relative`. +Dein `.hero`-Selektor sollte eine `position`-Eigenschaft mit `relative` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero')?.position === 'relative'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md index a16c492a5a4..42d9980c7b3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md @@ -7,7 +7,7 @@ dashedName: step-45 # --description-- -Create a `.hero-title` selector and give it a `text-align` property set to `center`, a `color` property set to `orangered` and a `font-size` property set to `8rem`. +Erstelle einen `.hero-title`-Selektor und gib ihm eine `text-align`-Eigenschaft mit dem Wert `center`, eine `color`-Eigenschaft mit dem Wert `orangered` und eine `font-size`-Eigenschaft mit dem Wert `8rem`. # --hints-- @@ -17,19 +17,19 @@ Du solltest einen `.hero-title`-Selektor haben. assert(new __helpers.CSSHelp(document).getStyle('.hero-title')); ``` -Your `.hero-title` selector should have a `text-align` property set to `center`. +Dein `.hero-title`-Selektor sollte eine `text-align`-Eigenschaft mit dem Wert `center` enthalten. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.textAlign === 'center'); ``` -Your `.hero-title` selector should have a `color` property set to `orangered`. +Dein `.hero-title`-Selektor sollte eine `color`-Eigenschaft mit dem Wert `orangered` enthalten. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.color === 'orangered'); ``` -Your `.hero-title` selector should have a `font-size` property set to `8rem`. +Dein `.hero-title`-Selektor sollte eine `font-size`-Eigenschaft mit dem Wert `8rem` enthalten. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.fontSize === '8rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md index 8898336bef7..7a5fba46c44 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md @@ -7,29 +7,29 @@ dashedName: step-46 # --description-- -The subtitle also needs to be styled. Create a `.hero-subtitle` selector and give it a `font-size` property set to `2.4rem`, a `color` property set to `orangered`, and a `text-align` property set to `center`. +Der Untertitel sollte ebenfalls gestaltet werden. Erstelle einen `.hero-subtitle`-Selektor und gib ihm eine `font-size`-Eigenschaft mit dem Wert `2.4rem`, eine `color`-Eigenschaft mit dem Wert `orangered` und eine `text-align`-Eigenschaft mit dem Wert `center`. # --hints-- -You should have a `.hero-subtitle` selector. +Du solltest einen `.hero-subtitle`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')); ``` -Your `.hero-subtitle` selector should have a `font-size` property set to `2.4rem`. +Dein `.hero-subtitle`-Selektor sollte eine `font-size`-Eigenschaft mit dem Wert `2.4rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.fontSize === '2.4rem'); ``` -Your `.hero-subtitle` selector should have a `color` property set to `orangered`. +Dein `.hero-subtitle`-Selektor sollte eine `color`-Eigenschaft mit dem Wert `orangered` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.color === 'orangered'); ``` -Your `.hero-subtitle` selector should have a `text-align` property set to `center`. +Dein `.hero-subtitle`-Selektor sollte eine `text-align`-Eigenschaft mit dem Wert `center` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.textAlign === 'center'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md index ae72267f7ed..71123165dc3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md @@ -7,7 +7,7 @@ dashedName: step-47 # --description-- -Create an `.author` selector and give it a `font-size` property set to `2rem` and a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Erstelle einen `.author`-Selektor und gib ihm eine `font-size`-Eigenschaft mit dem Wert `2rem` und eine `font-family`-Eigenschaft mit dem Wert `Raleway` mit dem Fallback-Wert `sans-serif`. # --hints-- @@ -23,7 +23,7 @@ Dein `.author`-Selektor sollte eine `font-size`-Eigenschaft mit dem Wert `2rem` assert(new __helpers.CSSHelp(document).getStyle('.author')?.fontSize === '2rem'); ``` -Your `.author` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Dein `.author`-Selektor sollte eine `font-family`-Eigenschaft mit dem Wert `Raleway` und mit dem Fallback-Wert `sans-serif` enthalten. ```js const fontFamily = new __helpers.CSSHelp(document).getStyle('.author')?.fontFamily; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md index 23ca9b29833..369b6958d1f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md @@ -7,19 +7,19 @@ dashedName: step-48 # --description-- -Create a `.author-name a:hover` selector and give it a `background-color` property set to `#306203`. +Erstelle einen `.author-name a:hover`-Selektor und gib ihm eine `background-color`-Eigenschaft mit dem Wert `#306203`. -This will create a hover effect only for the `a` element within the `.author-name`, showing the original freeCodeCamp green in the background. +Dies wird nur für das `a`-Element innerhalb des `.author-name` einen Hover-Effekt erzeugen, dass das ursprüngliche freeCodeCamp-Grün im Hintergrund anzeigt. # --hints-- -You should have an `.author-name a:hover` selector. +Du solltest einen `.author-name a:hover`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')); ``` -Your `.author-name a:hover` selector should have a `background-color` property set to `#306203`. +Dein `.author-name a:hover`-Selektor sollte eine `background-color`-Eigenschaft mit dem Wert `#306203` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')?.backgroundColor === 'rgb(48, 98, 3)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md index 4fa60b16a81..1f4b9ebc43c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md @@ -7,17 +7,17 @@ dashedName: step-49 # --description-- -Create a `.publish-date` selector and give it a `color` property of `rgba(255, 255, 255, 0.5)`. +Erstelle einen `.publish-date`-Selektor und gib ihm eine `color`-Eigenschaft mit dem Wert `rgba(255, 255, 255, 0.5)`. # --hints-- -You should have a `.publish-date` selector. +Du solltest einen `.publish-date`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.publish-date')); ``` -Your `.publish-date` selector should have a `color` property set to `rgba(255, 255, 255, 0.5)`. +Dein `.publish-date`-Selektor sollte eine `color`-Eigenschaft mit dem Wert `rgba(255, 255, 255, 0.5)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.publish-date')?.color === 'rgba(255, 255, 255, 0.5)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md index 221122a59e8..9044dc7898a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md @@ -7,23 +7,23 @@ dashedName: step-50 # --description-- -Create a `.social-icons` selector. Give it a `display` property set to `grid`, and a `font-size` property set to `3rem`. +Erstelle einen `.social-icons`-Selektor. Gib ihm eine `display`-Eigenschaft mit dem Wert `grid` und eine `font-size`-Eigenschaft mit dem Wert `3rem`. # --hints-- -You should have a `.social-icons` selector. +Du solltest einen `.social-icons`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')); ``` -Your `.social-icons` selector should have a `display` property set to `grid`. +Dein `.social-icons`-Selektor sollte eine `display`-Eigenschaft mit dem Wert `grid` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.display === 'grid'); ``` -Your `.social-icons` selector should have a `font-size` property set to `3rem`. +Dein `.social-icons`-Selektor sollte eine `font-size`-Eigenschaft mit dem Wert `3rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.fontSize === '3rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md index 2893e6d7b01..3f945eaebc1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md @@ -7,11 +7,11 @@ dashedName: step-51 # --description-- -The default settings for CSS Grid will create additional rows as needed, unlike Flexbox. Give the `.social-icons` selector a `grid-template-columns` property set to `repeat(5, 1fr)` to arrange the icons in a single row. +Mit den Standardeinstellungen für das CSS-Gitter werden im Gegensatz zu Flexbox bei Bedarf zusätzliche Zeilen erstellt. Gib dem `.social-icons`-Selektor eine `grid-template-columns`-Eigenschaft mit dem Wert `repeat(5, 1fr)`, um die Elemente in einer Zeile anzuordnen. # --hints-- -Your `.social-icons` selector should have a `grid-template-columns` property set to `repeat(5, 1fr)`. +Dein `.social-icons`-Selektor sollte eine `grid-template-columns`-Eigenschaft mit dem Wert `repeat(5, 1fr)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridTemplateColumns === 'repeat(5, 1fr)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md index 8206c4b1ece..002177362db 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md @@ -7,15 +7,15 @@ dashedName: step-52 # --description-- -If you wanted to add more social icons, but keep them on the same row, you would need to update `grid-template-columns` to create additional columns. As an alternative, you can use the `grid-auto-flow` property. +Wenn du weitere soziale Symbole hinzufügen möchtest, diese aber in der gleichen Zeile bleiben sollen, müsstest du `grid-template-columns` aktualisieren, um zusätzliche Spalten zu erstellen. Alternativ kannst du die `grid-auto-flow`-Eigenschaft verwenden. -This property takes either `row` or `column` as the first value, with an optional second value of `dense`. `grid-auto-flow` uses an auto-placement algorithm to adjust the grid layout. Setting it to `column` will tell the algorithm to create new columns for content as needed. The `dense` value allows the algorithm to backtrack and fill holes in the grid with smaller items, which can result in items appearing out of order. +Diese Eigenschaft nimmt entweder `row` oder `column` als ersten Wert, mit einem optionalen zweiten Wert von `dense`. `grid-auto-flow` verwendet einen automatischen Platzierungsalgorithmus, um das Gitterlayout anzupassen. Wenn man ihn auf `column` setzt, wird er dem Algorithmus mitteilen, dass er, wenn nötig, neue Spalten für den Inhalt erstellen soll. Der `dense`-Wert erlaubt dem Algorithmus die Löcher im Gitter zurückzuverfolgen und sie mit kleineren Elementen zu füllen, das dazu führen kann, dass Elemente nicht mehr in Reihenfolge erscheinen. -For your `.social-icons` selector, set the `grid-auto-flow` property to `column`. +Setze für deinen `.social-icons`-Selektor die `grid-auto-flow`-Eigenschaft auf `column`. # --hints-- -Your `.social-icons` selector should have a `grid-auto-flow` property set to `column`. +Dein `.social-icons`-Selektor sollte eine `grid-auto-flow`-Eigenschaft auf `column` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoFlow === 'column'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md index c9c1768e275..a87d16b6334 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md @@ -7,13 +7,13 @@ dashedName: step-53 # --description-- -Now the auto-placement algorithm will kick in when you add a new icon element. However, the algorithm defaults the new column width to be `auto`, which will not match your current columns. +Der automatische Platzierungs-Algoritmus wird aktiviert, wenn du ein neues Symbol-Element hinzufügst. Der Algorithmus wird jedoch standardmäßig die neue Spaltenbreite auf `auto` einstellen, was nicht mit den aktuellen Spalten übereinstimmt. -You can override this with the `grid-auto-columns` property. Give the `.social-icons` selector a `grid-auto-columns` property set to `1fr`. +Du kannst dies mit der `grid-auto-columns`-Eigenschaft überschreiben. Gib dem `.social-icons`-Selektor eine `grid-auto-columns`-Eigenschaft mit dem Wert `1fr`. # --hints-- -Your `.social-icons` selector should have a `grid-auto-columns` property set to `1fr`. +Dein `.social-icons` sollte eine `grid-auto-columns`-Eigenschaft mit dem Wert `1fr` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoColumns === '1fr'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md index f679e3b9f79..c2809e0d24e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md @@ -7,13 +7,13 @@ dashedName: step-54 # --description-- -Much like Flexbox, with CSS Grid you can align the content of grid items with `align-items` and `justify-items`. `align-items` will align child elements along the column axis, and `justify-items` will align child elements along the row axis. +Du kannst ähnlich wie bei Flexbox den Inhalt der Gitterelemente mit `align-items` und `justify-items` ausrichten. `align-items` wird untergeordnete Elemente entlang der Spaltenachse ausrichten und `justify-items` wird untergerordnete Elemente entlang der Zeilenachse ausrichten. -Give the `.social-icons` selector an `align-items` property set to `center`. +Gib dem `.social-icons`-Selektor eine `align-items`-Eigenschaft mit dem Wert `center`. # --hints-- -Your `.social-icons` selector should have an `align-items` property set to `center`. +Dein `.social-icons`-Selektor sollte eine `align-items`-Eigenschaft mit dem Wert `center` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.alignItems === 'center'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md index 4b2ea95f9db..b52afafaa62 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md @@ -7,17 +7,17 @@ dashedName: step-55 # --description-- -Give the `.text` selector a `font-size` property set to `1.8rem` and a `letter-spacing` property set to `0.6px`. +Gib dem `.text`-Selektor eine `font-size` Eigenschaft mit dem Wert `1.8rem` und eine `letter-spacing`-Eigenschaft mit dem Wert `0.6px`. # --hints-- -Your `.text` selector should have a `font-size` property set to `1.8rem`. +Dein `.text`-Selektor sollte eine `font-size`-Eigenschaft mit dem Wert `1.8rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.fontSize === '1.8rem'); ``` -Your `.text` selector should have a `letter-spacing` property set to `0.6px`. +Dein `.text`-Selektor sollte eine `letter-spacing`-Eigenschaft mit dem Wert `0.6px` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.letterSpacing === '0.6px'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md index 58b933b0735..7f8684d373a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md @@ -7,13 +7,13 @@ dashedName: step-56 # --description-- -Your `.text` element is not a CSS Grid, but you can create columns within an element without using Grid by using the `column-width` property. +Dein `.text`-Element ist kein CSS-Gitter, du kannst aber Spalten innerhalb eines Elements ohne die Verwendung von Gitter erstellen, indem du die `column-width`-Eigenschaft verwendest. -Give your `.text` selector a `column-width` property set to `25rem`. +Gib deinem `.text`-Selektor eine `column-width`-Eigenschaft mit dem Wert `25rem`. # --hints-- -Your `.text` selector should have a `column-width` property set to `25rem`. +Dein `.text`-Selektor sollte eine `column-width`-Eigenschaft mit dem Wert `25rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.columnWidth === '25rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md index af2ab0b550e..651fdffdaec 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md @@ -13,7 +13,7 @@ Um dein Projekt nach einem gedruckten Magazin aussehen zu lassen, weise dem `.te # --hints-- -Your `.text` selector should have a `text-align` property set to `justify`. +Dein `.text`-Selektor sollte eine `text-align`-Eigenschaft mit dem Wert `justify` enthalten. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.textAlign === 'justify'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md index 886228a1deb..c6a85bd9125 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md @@ -7,25 +7,25 @@ dashedName: step-58 # --description-- -The `::first-letter` pseudo-selector allows you to target the first letter in the text content of an element. +Der `::first-letter` Pseudo-Selektor erlaubt dir den ersten Buchstaben im Textinhalt eines Elements anzuvisieren. -Create a `.first-paragraph::first-letter` selector and set the `font-size` property to `6rem`. Also give it a `color` property set to `orangered` to make it stand out. +Erstelle einen `.first-paragraph::first-letter`-Selektor und setze die `font-size`-Eigenschaft auf `6rem`. Gib ihm ebenfalls eine `color`-Eigenschaft mit dem Wert `orangered`, um ihn hervorzuheben. # --hints-- -You should have a `.first-paragraph::first-letter` selector. +Du solltest einen `.first-paragraph::first-letter`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')); ``` -Your `.first-paragraph::first-letter` selector should have a `font-size` property set to `6rem`. +Dein `.first-paragraph::first-letter`-Selektor sollte eine `font-size`- Eigenschaft mit dem Wert `6rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.fontSize === '6rem'); ``` -Your `.first-paragraph::first-letter` selector should have a `color` property set to `orangered`. +Dein `.first-paragraph::first-letter`-Selektor sollte eine `color`-Eigenschaft mit dem Wert `orangered` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.color === 'orangered'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md index 67f917d3100..287a3635f55 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md @@ -7,17 +7,17 @@ dashedName: step-59 # --description-- -The other text has been shifted out of place. Move it into position by giving the `.first-paragraph::first-letter` selector a `float` property set to `left` and a `margin-right` property set to `1rem`. +Der andere Text wurde an einen anderen Ort verschoben. Verschiebe ihn in Position, indem du dem `.first-paragraph::first-letter`-Selektor eine `float`-Eigenschaft mit dem Wert `left` und eine `margin-right`-Eigenschaft mit dem Wert `1rem` gibst. # --hints-- -Your `.first-paragraph::first-letter` selector should have a `float` property set to `left`. +Dein `.first-paragraph::first-letter`- Selektor sollte eine `float`-Eigenschaft mit dem Wert `left` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.float === 'left'); ``` -Your `.first-paragraph::first-letter` selector should have a `margin-right` property set to `1rem`. +Dein `.first-paragraph::first-letter`-Selektor sollte eine `margin-right`- Eigenschaft mit dem Wert `1rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.marginRight === '1rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md index 6cc105209df..949be139d5b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md @@ -7,17 +7,17 @@ dashedName: step-60 # --description-- -Create an `hr` selector, and give it a `margin` property set to `1.5rem 0`. +Erstelle einen `hr`-Selektor und gib ihm eine `margin`-Eigenschaft mit dem Wert `1.5rem 0`. # --hints-- -You should have an `hr` selector. +Du solltest einen `hr`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('hr')); ``` -Your `hr` selector should have a `margin` property set to `1.5rem 0`. +Dein `hr`-Selektor sollte eine `margin`-Eigenschaft mit dem Wert `1.5rem 0` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('hr')?.margin === '1.5rem 0px'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md index 7f5ced6c083..d82931b19e7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md @@ -7,11 +7,11 @@ dashedName: step-61 # --description-- -To give the `hr` a color, you need to adjust the `border` property. Give the `hr` selector a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. +Um dem `hr`-Element eine Farbe zuzuweisen, musst du die `border`-Eigenschaft anpassen. Gib dem `hr`-Selektor eine `border`-Eigenschaft mit dem Wert `1px solid rgba(120, 120, 120, 0.6)`. # --hints-- -Your `hr` should have a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. +Dein `hr` sollte eine `border`-Eigenschaft mit dem Wert `1px solid rgba(120, 120, 120, 0.6)` besitzen. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md index 9e25f5ea6fc..8248d1fec80 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md @@ -7,29 +7,29 @@ dashedName: step-62 # --description-- -Create a `.quote` selector. Give it a `color` property set to `#00beef`, a `font-size` property set to `2.4rem`, and a `text-align` property set to `center`. +Erstelle einen `.quote`-Selektor. Gib ihm eine `color`-Eigenschaft mit dem Wert `#00beef`, eine `font-size`-Eigenschaft mit dem Wert `2.4rem` und eine `text-align`-Eigenschaft mit dem Wert `center`. # --hints-- -You should have a `.quote` selector. +Du solltest einen `.quote`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote')); ``` -Your `.quote` selector should have a `color` property set to `#00beef`. +Dein `.quote`-Selektor sollte eine `color`-Eigenschaft mit dem Wert `#00beef` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote')?.color === 'rgb(0, 190, 239)'); ``` -Your `.quote` selector should have a `font-size` property set to `2.4rem`. +Dein `.quote`-Selektor sollte eine `font-size`-Eigenschaft mit dem Wert `2.4rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote')?.fontSize === '2.4rem'); ``` -Your `.quote` selector should have a `text-align` property set to `center`. +Dein `.quote`-Selektor sollte eine `text-align`-Eigenschaft mit dem Wert `center` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote')?.textAlign === 'center'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md index a606a3fe677..b8219b95890 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md @@ -7,11 +7,11 @@ dashedName: step-63 # --description-- -To make the quote text stand out more, give the `.quote` selector a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Gib dem `.quote`-Selektor eine `font-family`-Eigenschaft mit dem Wert `Raleway` mit einem Fallback von `sans-serif`, um den Zitattext hervorheben zu können. # --hints-- -Your `.quote` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Dein `.quote`-Selektor sollte eine `font-family`-Eigenschaft mit dem Wert `Raleway` mit einem Fallback von `sans-serif` haben. ```js const fontFamily = new __helpers.CSSHelp(document).getStyle('.quote')?.fontFamily; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index 42f5fcc3bee..c793d7a5a5a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -7,33 +7,33 @@ dashedName: step-64 # --description-- -A quote is not really a quote without proper quotation marks. You can add these with CSS pseudo selectors. +Ein Zitat ist ohne passende Anführungszeichen nicht wirklich ein Zitat. Du kannst diese mit den CSS-Pseudo-Selektoren hinzufügen. -Create a `.quote::before` selector and set the `content` property to `"` with a space following it. +Erstelle einen `.quote::before`-Selektor und setzte die `content`-Eigenschaft auf `"` mit einem Leerzeichen, das ihm folgt. -Also, create a `.quote::after` selector and set the `content` property to `"` with a space preceding it. +Erstelle ebenfalls einen `.quote::after`- Selektor und setzte die `content`-Eigenschaft auf `"` mit einem Leerzeichen, das ihm vorausgeht. # --hints-- -You should have a `.quote::before` selector. +Du solltest einen `.quote::before`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); ``` -Your `.quote::before` selector should have a `content` property set to `'" '`. +Dein `.quote::before`-Selektor sollte eine `content`-Eigenschaft mit dem Wert `'" '` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` -You should have a `.quote::after` selector. +Du solltest ein `.quote::after`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); ``` -Your `.quote::after` selector should have a `content` property set to `' "'`. +Dein `.quote::after`-Selektor sollte eine `content`-Eigenschaft mit `' "'` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\"\s\\""/)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md index d23b9b67455..52eaf62ac9f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md @@ -7,19 +7,19 @@ dashedName: step-65 # --description-- -Now it's time to style your third `section`. Note that it has the `text` and `text-with-images` values for the `class` attribute, which means it is already inheriting the styles from your `.text` rule. +Nun ist es an der Zeit, deine dritte `section` zu gestalten. Beachte, dass es die `text` und `text-with-images`-Werte für die `class` enthält, was bedeutet, dass es bereits die Stile deiner `.text`-Regel erbt. -Create a `.text-with-images` selector and set the `display` property to `grid`. +Erstelle einen `.text-with-images`-Selektor und setze die `display`-Eigenschaft auf `grid`. # --hints-- -You should have a `.text-with-images` selector. +Du solltest einen `.text-with-images`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')); ``` -Your `.text-with-images` selector should have a `display` property set to `grid`. +Dein `.text-with-images`-Selektor sollte die `display`-Eigenschaft auf `grid` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.display === 'grid'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md index a70b40cfe37..cc4a30a8282 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md @@ -7,17 +7,17 @@ dashedName: step-66 # --description-- -You will need to have a column for text and a column for images. Give the `.text-with-images` selector a `grid-template-columns` property set to `1fr 2fr`. Also set the `column-gap` property to `3rem` to provide more spacing between the columns. +Du brauchst eine Spalte für Text und eine Spalte für Bilder. Gib dem `.text-with-images`-Selektor eine `grid-template-columns`-Eigenschaft mit dem Wert `1fr 2fr`. Setze auch die `column-gap`-Eigenschaft auf `3rem`, um mehr Abstand zwischen den Spalten zu ermöglichen. # --hints-- -Your `.text-with-images` selector should have a `grid-template-columns` property set to `1fr 2fr`. +Dein `.text-with-images`-Selektor sollte eine `grid-template-columns`-Eigenschaft mit dem Wert `1fr 2fr` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.gridTemplateColumns === '1fr 2fr'); ``` -Your `.text-with-images` selector should have a `column-gap` property set to `3rem`. +Dein `.text-with-images`-Selektor sollte eine `column-gap`-Eigenschaft mit dem Wert `3rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.columnGap === '3rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md index 5c5d50b2749..417a5f141f9 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md @@ -7,11 +7,11 @@ dashedName: step-67 # --description-- -Give the `.text-with-images` selector a `margin-bottom` property set to `3rem`. +Gib dem `.text-with-images`-Selektor eine `margin-bottom`-Eigenschaft mit dem Wert `3rem`. # --hints-- -Your `.text-with-images` selector should have a `margin-bottom` property set to `3rem`. +Dein `.text-with-images`-Selektor sollte eine `margin-bottom`-Eigenschaft mit dem Wert `3rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.marginBottom === '3rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md index f6db050f474..1f779556396 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md @@ -7,17 +7,17 @@ dashedName: step-68 # --description-- -Create a `.lists` selector and set the `list-style-type` property to `none`. This will get rid of the bullet points on the list items. +Erstelle einen `.lists`-Selektor und setze die `list-style-type`-Eigenschaft auf `none`. Dies wird alle wichtigsten Punkte auf den Listenelementen entfernen. # --hints-- -You should have a `.lists` selector. +Du solltest einen `.lists`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists')); ``` -Your `.lists` selector should have a `list-style-type` property set to `none`. +Dein `.lists`-Selektor sollte eine `list-style-type`-Eigenschaft mit dem Wert `none` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists')?.listStyleType === 'none'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md index 844808c9b96..b9935d58c55 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md @@ -7,11 +7,11 @@ dashedName: step-69 # --description-- -Give the `.lists` selector a `margin-top` property set to `2rem`. +Gib dem `.lists`-Selektor eine `margin-top`-Eigenschaft mit dem Wert `2rem`. # --hints-- -Your `.lists` selector should have a `margin-top` property set to `2rem`. +Dein `.lists`-Selektor sollte eine `margin-top`-Eigenschaft mit dem Wert `2rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists')?.marginTop === '2rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md index 564e82d420b..4c9dad2edff 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md @@ -7,17 +7,17 @@ dashedName: step-70 # --description-- -Create a `.lists li` rule to target the list items within your `.lists` element. Give it a `margin-bottom` property set to `1.5rem`. +Erstelle eine `.lists li`-Regel, um die Listenelemente innerhalb deines `.lists`-Elements anzuvisieren. Gib ihr eine `margin-bottom`-Eigenschaft mit dem Wert `1.5rem`. # --hints-- -You should have a `.lists li` selector. +Du solltest einen `.lists li`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists li')); ``` -Your `.lists li` selector should have a `margin-bottom` property set to `1.5rem`. +Dein `.lists li`-Selektor sollte eine `margin-bottom`-Eigenschaft mit dem Wert `1.5rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists li')?.marginBottom === '1.5rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md index e70b56037ac..63bfdd003e1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md @@ -7,17 +7,17 @@ dashedName: step-71 # --description-- -Create a `.list-title, .list-subtitle` selector and set the `color` property to `#00beef`. +Erstelle einen `.list-title, .list-subtitle`-Selektor und setze die `color`-Eigenschaft auf `#00beef`. # --hints-- -You should have a `.list-title, .list-subtitle` selector. +Du solltest einen `.list-title, .list-subtitle`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')) ``` -Your `.list-title, .list-subtitle` selector should have a `color` property set to `#00beef`. +Dein `.list-title, .list-subtitle`-Selektor sollte eine `color`-Eigenschaft mit dem Wert `#00beef` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')?.color === 'rgb(0, 190, 239)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md index 84975c1a458..8012e31d99e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md @@ -7,19 +7,19 @@ dashedName: step-72 # --description-- -Time to style the last section of the magazine - the images. +Zeit für die Gestaltung des letzten Teil deines Magazins - die Bilder. -The images are wrapped with an `aside` element using the `image-wrapper` class, so create an `.image-wrapper` selector. Set the `display` property to `grid`. +Die Bilder sind mit einem `aside`-Element umhüllt, das die `image-wrapper`-Klasse verwendet, also erstelle einen `.image-wrapper`-Selektor. Setze die `display`-Eigenschaft auf `grid`. # --hints-- -You should have an `.image-wrapper` selector. +Du solltest einen `.image-wrapper`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')); ``` -Your `.image-wrapper` selector should have a `display` property set to `grid`. +Dein `.image-wrapper`-Selektor sollte eine `display`-Eigenschaft auf `grid` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.display === 'grid'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md index de2324b3174..64ba9fb54d0 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md @@ -7,19 +7,19 @@ dashedName: step-73 # --description-- -The images should be within a two column, three row layout. +Die Bilder sollten sich innerhalb eines zweispaltigen, drei-Zeilen-Layouts befinden. -Give the `.image-wrapper` selector a `grid-template-columns` property set to `2fr 1fr` and a `grid-template-rows` property set to `repeat(3, min-content)`. This will give our grid rows that adjust in height based on the content, but columns that remain a fixed width based on the container. +Gib dem `.image-wrapper`-Selektor eine `grid-template-columns`-Eigenschaft mit dem Wert `2fr 1fr` und eine `grid-template-rows`-Eigenschaft mit dem Wert `repeat(3, min-content)`. Auf diese Weise erhalten wir Zeilen, die sich in der Höhe an den Inhalt anpassen, aber Spalten, die eine feste Breite basierend auf dem Container haben. # --hints-- -Your `.image-wrapper` selector should have a `grid-template-columns` property set to `2fr 1fr`. +Dein `.image-wrapper`-Selektor sollte eine `grid-template-columns`-Eigenschaft mit dem Wert `2fr 1fr` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateColumns === '2fr 1fr'); ``` -Your `.image-wrapper` selector should have a `grid-template-rows` property set to `repeat(3, min-content)`. +Dein `.image-wrapper`-Selektor sollte eine `grid-template-rows`-Eigenschaft mit dem Wert `repeat(3, min-content)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateRows === 'repeat(3, min-content)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md index fa515eaa7cc..540096accf4 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md @@ -7,13 +7,13 @@ dashedName: step-74 # --description-- -The `gap` property is a shorthand way to set the value of `column-gap` and `row-gap` at the same time. If given one value, it sets the `column-gap` and `row-gap` both to that value. If given two values, it sets the `row-gap` to the first value and the `column-gap` to the second. +Die `gap`-Eigenschaft ist ein schnellerer Weg, um den Wert von `column-gap` und `row-gap` gleichzeitig festzulegen. Wenn ein Wert gegeben ist, legt er beide Werte, den `column-gap` und `row-gap`, auf diesen Wert fest. Wenn zwei Werte gegeben sind, setzt er den `row-gap` auf den ersten Wert und `column-gap` auf den zweiten fest. -Give the `.image-wrapper` selector a `gap` property set to `2rem`. +Gib dem `.image-wrapper`-Selektor eine `gap`-Eigenschaft mit dem Wert `2rem`. # --hints-- -Your `.image-wrapper` element should have a `gap` property set to `2rem`. +Dein `.image-wrapper`-Element sollte eine `gap`-Eigenschaft mit `2rem` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gap === '2rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md index 19f1a7cff61..048fdab8508 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md @@ -7,13 +7,13 @@ dashedName: step-75 # --description-- -The `place-items` property can be used to set the `align-items` and `justify-items` values at the same time. The `place-items` property takes one or two values. If one value is provided, it is used for both the `align-items` and `justify-items` properties. If two values are provided, the first value is used for the `align-items` property and the second value is used for the `justify-items` property. +Die `place-items`-Eigenschaft kann verwendet werden, um die `align-items` und `justify-items`-Werte gleichzeitig festzulegen. Die `place-items`-Eigenschaft nimmt ein oder zwei Werte ein. Wenn ein Wert angegeben wird, wird er für die `align-items` und `justify-items`-Eigenschaften verwendet. Wenn zwei Werte gegeben werden, wird der erste Wert für die `align-items`-Eigenschaft und der zweite Wert für die `justify-items`-Eigenschaft verwendet. -Give the `.image-wrapper` selector a `place-items` property set to `center`. +Gib dem `.image-wrapper`-Selektor eine `place-items`-Eigenschaft mit dem Wert `center`. # --hints-- -Your `.image-wrapper` selector should have a `place-items` property set to `center`. +Dein `.image-wrapper`-Selektor sollte eine `place-items`-Eigenschaft auf `center` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.placeItems === 'center'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md index c76a1c2c43c..ced5d4d3a16 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md @@ -7,17 +7,17 @@ dashedName: step-76 # --description-- -Create an `.image-1, .image-3` rule and give it a `grid-column` property set to `1 / -1`. This will allow the first and third images to span the full width of the grid. +Erstelle eine `.image-1, .image-3`-Regel und gib ihr eine `grid-column`-Eigenschaft mit dem Wert `1 / -1`. Dadurch können die ersten und dritten Bilder die volle Breite des Gitters überschreiten. # --hints-- -You should have an `.image-1, .image-3` selector. +Du solltest einen `.image-1, .image-3`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')); ``` -Your `.image-1, .image-3` selector should have a `grid-column` property set to `1 / -1`. +Dein `.image-1, .image-3`-Selektor sollte eine `grid-column`-Eigenschaft auf `1 / -1` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')?.gridColumn === '1 / -1'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md index 48bd22b5b2c..344cc25e9b1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md @@ -7,9 +7,9 @@ dashedName: step-77 # --description-- -Now that the magazine layout is finished, you need to make it responsive. +Da das Layout des Magazins fertig ist, musst du es responsive gestalten. -Start with a `@media` query for `only screen` with a `max-width` of `720px`. Inside, create an `.image-wrapper` selector and give it a `grid-template-columns` property of `1fr`. +Beginne mit einer `@media`-Query für `only screen` mit einer `max-width` von `720px`. Erstelle innen einen `.image-wrapper`-Selektor und weise ihm eine `grid-template-columns`-Eigenschaft mit dem Wert `1fr` zu. Dadurch werden die drei Bilder auf kleineren Bildschirmen zu einer einzigen Spalte zusammengefügt. @@ -27,7 +27,7 @@ Deine neue `@media`-Regel sollte einen `.image-wrapper`-Selektor enthalten. assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.selectorText === '.image-wrapper'); ``` -Your new `.image-wrapper` selector should have a `grid-template-columns` property of `1fr`. +Dein neuer `.image-wrapper`-Selektor sollte eine `grid-template-columns`-Eigenschaft mit dem Wert `1fr` enthalten. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md index ca3468a934e..976c52da92d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md @@ -7,25 +7,25 @@ dashedName: step-78 # --description-- -Create another `@media` query for `only screen` with a `max-width` of `600px`. Within, create a `.text-with-images` rule and give it a `grid-template-columns` property of `1fr`. +Erstelle eine weitere `@media`-Anfrage für `only screen` mit einer `max-width` von `600px`. Erstelle innen eine `.text-with-images`-Regel und gib ihr eine `grid-template-columns`-Eigenschaft mit dem Wert `1fr`. -This will collapse your bottom text area into a single column on smaller screens. +Dadurch wird der untere Textbereich auf kleineren Bildschirmen in eine einzelne Spalte eingeblendet. # --hints-- -You should create a new `@media` query for `only screen and (max-width: 600px)`. This should be below your previous `@media` query. +Du solltest eine neue `@media`-Anfrage für `only screen and (max-width: 600px)` erstellen. Diese sollte sich unter deiner vorherigen `@media`-Query befinden. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === 'only screen and (max-width: 600px)'); ``` -Your new `@media` query should have a `.text-with-images` selector. +Deine neue `@media`-Query sollte einen `.text-with-images`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.selectorText === '.text-with-images'); ``` -Your new `.text-with-images` selector should have a `grid-template-columns` property with a value of `1fr`. +Dein neuer `.text-with-images`-Selektor sollte eine `grid-template-columns`-Eigenschaft mit einem Wert `1fr` haben. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md index 26f54135939..c469963fca6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md @@ -7,17 +7,17 @@ dashedName: step-79 # --description-- -Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-title` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`. +Erstelle eine dritte `@media`-Query für `only screen` mit einer `max-width` von `550px`. Erstelle innerhalb einen `.hero-title`-Selektor eine `font-size` mit dem Wert `6rem`, einen `.hero-subtitle, .author, .quote, .list-title`-Selektor mit der `font-size` von `1.8rem`, einen `.social-icons`-Selektor mit einer `font-size` von `2rem` und einem `.text`-Selektor mit einer `font-size` von `1.6rem`. # --hints-- -You should have a new `@media` query for `only screen` with a `max-width` of `550px`. This should come after your previous two. +Du solltest eine neue `@media`-Query für `only screen` mit einer `max-width` von `550px` haben. Dies sollte nach deinen vorherigen zwei erfolgen. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)'); ``` -Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-title` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order. +Deine neue `@media`-Regel sollte einen `.hero-title`-Selektor, einen `.hero-subtitle, .author, .quote, .list-title`-Selektor, einen `.social-icons`-Selektor und einen `.text`-Selektor haben. Diese Selektoren sollten in dieser Reihenfolge sein. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title'); @@ -26,25 +26,25 @@ assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]? assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text'); ``` -Your `.hero-title` selector should have a `font-size` set to `6rem`. +Dein `.hero-title`-Selektor sollte eine `font-size` mit dem Wert `6rem` haben. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem'); ``` -Your `.hero-subtitle, .author, .quote, .list-title` selector should have a `font-size` set to `1.8rem`. +Dein `.hero-subtitle, .author, .quote, .list-title`-Selektor sollte eine `font-size` mit dem Wert `1.8rem` haben. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem'); ``` -Your `.social-icons` selector should have a `font-size` set to `2rem`. +Dein `.social-icons`-Selektor sollte eine `font-size` mit dem Wert `2rem` haben. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.style?.fontSize === '2rem'); ``` -Your `.text` selector should have a `font-size` set to `1.6rem`. +Dein `.text`-Selektor sollte eine `font-size` mit dem Wert `1.6rem` haben. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.style?.fontSize === '1.6rem'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md index 03b46328c82..524653d32e6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md @@ -7,19 +7,19 @@ dashedName: step-80 # --description-- -Create one final `@media` query for `only screen` with a `max-width` of `420px`. Erstelle innerhalb der Media Query einen `.hero-title`-Selektor mit einer `font-size`-Eigenschaft mit dem Wert `4.5rem`. +Erstelle eine letzte `@media`-Query für `only screen` mit einer `max-width` von `420px`. Erstelle innerhalb der Media Query einen `.hero-title`-Selektor mit einer `font-size`-Eigenschaft mit dem Wert `4.5rem`. Glückwunsch! Dein Magazin ist nun fertig. # --hints-- -You should have a new `@media` query for `only screen and (max-width: 420px)`. This should be the last query in the `@media` query list. +Du solltest für `only screen and (max-width: 420px)` eine neue `@media`-Query haben. Dies sollte die letzte Query in der `@media`-Query-Liste sein. ```js assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText, 'only screen and (max-width: 420px)'); ``` -Your new `@media` query should have a `.hero-title` selector. +Deine neue `@media`-Query sollte einen `.hero-title`-Selektor enthalten. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.selectorText === '.hero-title'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md index a9fcc88aec2..28a42dad673 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md @@ -7,7 +7,7 @@ dashedName: step-5 # --description-- -After your `img` element, add an `h1` element with the `class` set to `hero-title` and the text set to `OUR NEW CURRICULUM`, followed by a `p` element with the `class` set to `hero-subtitle` and the text set to `Our efforts to restructure our curriculum with a more project-based focus`. +Füge nach deinem `img`-Element ein `h1`-Element hinzu, bei dem die `class` den Wert `hero-title` enthält und der Text auf `OUR NEW CURRICULUM` eingestellt ist, gefolgt von einem `p`-Element, bei dem die `class` den Wert `hero-subtitle` enthält und der Text auf `Our efforts to restructure our curriculum with a more project-based focus` eingestellt ist. # --hints-- @@ -23,7 +23,7 @@ Dein `h1`-Element sollte nach deinem `img`-Element stehen. assert(document.querySelector('h1')?.previousElementSibling?.localName === 'img'); ``` -Your `h1` element should have the `class` set to `hero-title`. +Bei deinem `h1`-Element sollte die `class` den Wert `hero-title` haben. ```js assert(document.querySelector('h1')?.className === 'hero-title'); @@ -47,7 +47,7 @@ Dein `p`-Element sollte nach deinem `h1`-Element kommen. assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); ``` -Your `p` element should have the `class` set to `hero-subtitle`. +Dein `p`-Element sollte eine `class` mit dem Wert `hero-subtitle` haben. ```js assert(document.querySelector('p')?.className === 'hero-subtitle'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md index a29cab1c1b5..4db0ff999ae 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md @@ -7,11 +7,11 @@ dashedName: step-8 # --description-- -The `Referer` HTTP header contains information about the address or URL of a page that a user might be visiting from. This information can be used in analytics to track how many users from your page visit freecodecamp.org, for example. Setting the `rel` attribute to `noreferrer` omits this information from the HTTP request. Give your `a` element a `rel` attribute set to `noreferrer`. +Der `Referer` HTTP-Header enthält Informationen über die Adresse oder URL einer Seite, von der aus ein Benutzer besuchen könnte. Diese Information kann in der Analyse verwendet werden, um zum Beispiel zu verfolgen, wie viele Benutzer deiner Seite freecodecamp.org besuchen. Das Festlegen des `rel`-Attributs auf `noreferrer` lässt diese Information aus der HTTP-Anfrage außer Acht. Gib deinem `a`-Element ein `rel`-Attribut von `noreferrer`. # --hints-- -Your `a` element should have the `rel` set to `noreferrer`. +Dein `a`-Element sollte den `rel` auf `noreferrer` festgelegt haben. ```js assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('rel') === 'noreferrer'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md index dc0176353dd..041439bb300 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md @@ -7,17 +7,17 @@ dashedName: step-40 # --description-- -Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`. +Gib dem Pseudo-Element eine `width`, die halb so breit ist wie die des Elternelements, eine `height` von `45%` und eine `background-color` von `gray`. # --hints-- -You should give `.penguin-body::before` a `width` of `50%`. +Du solltest `.penguin-body::before` eine `width` von `50%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%'); ``` -You should give `.penguin-body::before` a `height` of `45%`. +Du solltest `.penguin-body::before` eine `height` von `45%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md index bf4591cc3ca..174482423d3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -Position the pseudo-element `10%` from the top and `25%` from the left of its parent. +Positioniere das Pseudo-Element `10%` von oben und `25%` von links von seinem Elternelement aus. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md index a712ee7afbd..a10d830e8c0 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md @@ -7,11 +7,11 @@ dashedName: step-43 # --description-- -Increase the pseudo-element's transparency by `30%`. +Erhöhe die Transparenz des Pseudo-Elements um `30%`. # --hints-- -You should give `.penguin-body::before` an `opacity` of `70%`. +Du solltest `.penguin-body::before` eine `opacity` von `70%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md index 4c7d866b313..fbdc5b7d740 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md @@ -7,7 +7,7 @@ dashedName: step-38 # --description-- -Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. +Dein Code wird langsam ziemlich lang. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md index 519dba1836c..8aad47f2bde 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md @@ -9,7 +9,7 @@ dashedName: step-32 Das `strong`-Element wird verwendet, um anzuzeigen, dass mancher Text von großer Bedeutung oder dringend ist. -In the `figcaption` you just added, indicate that `hate` is of strong importance by wrapping it in a `strong` element. +Gib in der soeben hinzugefügten `figcaption` an, dass `hate` von großer Bedeutung ist, indem du es mit einem `strong`-Element umschließt. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md index 780e10a2eca..69e6aef3a92 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md @@ -7,11 +7,11 @@ dashedName: step-83 # --description-- -Use an id selector to create a rule for the id `guitar-neck`. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`. +Verwende einen id-Selektor, um eine Regel für die ID `guitar-neck` zu erstellen. Setze die `width` auf `200px`, die `height` auf `30px` und den `background-color` auf `#D2691E`. # --hints-- -You should create a `#guitar-neck` selector. +Du solltest einen `#guitar-neck`-Selektor erstellen. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md index 22e9dce5b3a..dde18ec20d7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md @@ -19,7 +19,7 @@ Your `tbody` element should have one `tr` element. assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1); ``` -Your `tr` element should have the `class` set to `total`. +Dein `tr`-Element sollte die `class` auf `total` eingestellt haben. ```js assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total')); @@ -43,7 +43,7 @@ You should wrap the text `Net Worth` in a `span` element. assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth'); ``` -Your `span` element should have the `class` attribute set to `sr-only`. +Dein `span`-Element sollte das `class`-Attribut auf `sr-only` eingestellt haben. ```js assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md index 4127994690f..4bb72a8ef84 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md @@ -7,11 +7,11 @@ dashedName: step-28 # --description-- -Time to style your table. Start by resetting the box model. 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. Create an `html` selector and give it a `box-sizing` property set to `border-box`. # --hints-- -You should have an `html` selector. +Du solltest einen `html`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('html')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md index 97275d9721d..aac412da64c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md @@ -7,11 +7,11 @@ 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. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`. +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`. # --hints-- -You should have a `section` selector. +Du solltest einen `section`-Selektor haben. ```js assert(new __helpers.CSSHelp(document).getStyle('section')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md index 37746c9d7e5..b1ca746fe0b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md @@ -1,6 +1,6 @@ --- id: 6201830cb0c74b69f1b41635 -title: Step 50 +title: Schritt 50 challengeType: 0 dashedName: step-50 --- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md index f9fc7bfe9df..3eac86a2969 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md @@ -7,13 +7,13 @@ dashedName: step-5 # --description-- -Margin is the area outside of the box, and can be used to control the space between other boxes or elements. +Die Margin ist der Bereich außerhalb der Box und kann genutzt werden, um den Abstand zwischen anderen Boxen oder Elementen zu steuern. Hier hat das untere Element eine größere obere Margin, wodurch es auf der Seite weiter nach unten verschoben wird. Lass uns nun, da du das CSS-Boxmodell verstehst, mit dem Rothko-Bild beginnen. -Remove the `` element. +Entferne das ``-Element. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md index e6219fa6631..b46658e17f3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md @@ -7,18 +7,18 @@ dashedName: step-25 # --description-- -Set the `height` of the `.two` element to 200 pixels. +Setzte die `height` vom `.two`-Element auf 200 Pixel. # --hints-- -You should set the `height` property to `200px`. +Du solltest die `height`-Eigenschaft auf `200px` setzen. ```js const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px'); assert(hasHeight); ``` -Your `.two` element should have a `height` value of `200px`. +Dein `.two`-Element sollte einen `height`-Wert von `200px` haben. ```js const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height'); diff --git a/curriculum/challenges/italian/03-front-end-development-libraries/redux/write-a-counter-with-redux.md b/curriculum/challenges/italian/03-front-end-development-libraries/redux/write-a-counter-with-redux.md index 009979bd4e7..78832ccc150 100644 --- a/curriculum/challenges/italian/03-front-end-development-libraries/redux/write-a-counter-with-redux.md +++ b/curriculum/challenges/italian/03-front-end-development-libraries/redux/write-a-counter-with-redux.md @@ -28,19 +28,19 @@ Il creatore di azione `decAction` dovrebbe restituire un oggetto azione con `typ assert(decAction().type === DECREMENT); ``` -Running `store.getState()` should return a number +Eseguire `store.getState()` dovrebbe restituire un numero ```js assert(typeof store.getState() === 'number'); ``` -The Redux store should initialize with a `state` of 0. +Lo store Redux dovrebbe essere inizializzato con uno `state` di 0. ```js assert(_store.getState() === 0); ``` -Dispatching `incAction` on the Redux store should increment the `state` by 1. +Effettuare il dispatch di `incAction` nello store Redux dovrebbe aumentare lo `state` di 1. ```js assert( @@ -53,7 +53,7 @@ assert( ); ``` -Dispatching `decAction` on the Redux store should decrement the `state` by 1. +Effettuare il dispatch di `decAction` nello store Redux dovrebbe decrementare lo `state` di 1. ```js assert( @@ -66,7 +66,7 @@ assert( ); ``` -`counterReducer` should be a function +`counterReducer` dovrebbe essere una funzione ```js assert(typeof counterReducer === 'function'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md index 61270f2e3ea..57819c2fedf 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md @@ -7,11 +7,11 @@ dashedName: step-64 # --description-- -Turn the existing `freeCodeCamp.org` text into a link by enclosing it in an anchor (`a`) element. L'attributo `href` dovrebbe avere valore `https://www.freecodecamp.org`. +Trasforma il testo esistente `freeCodeCamp.org` un link racchiudendolo in un elemento di ancoraggio (`a`). L'attributo `href` dovrebbe avere valore `https://www.freecodecamp.org`. # --hints-- -Your anchor (`a`) element should be nested within the `p` element inside the `footer`. Assicurati di aggiungere un tag di apertura e di chiusura per l'elemento di ancoraggio (`a`). +L'elemento di ancoraggio (`a`) dovrebbe essere annidato all'interno dell'elemento `p` nel `footer`. Assicurati di aggiungere un tag di apertura e di chiusura per l'elemento di ancoraggio (`a`). ```js assert($('footer > p > a').length); diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md index ab10bb87304..45ab85eda47 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md @@ -32,7 +32,7 @@ Na matemática, um número pode ser verificado como par ou ímpar por meio do re # --instructions-- -Define o `resto` igual ao restante de `11` dividido por `3` usando o operador de restante (`%`). +Define `remainder` como o resto da divisão de `11` por `3` usando o operador de resto (`%`). # --hints--