diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md index a4b93cbacbb..442cfecba2e 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md @@ -20,7 +20,7 @@ dashedName: step-49 你的 `.red` CSS 規則應該有一個 `background` 屬性,其值爲 `rgb(255, 0, 0)`。 ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.red').cssText, 'background: rgb(255, 0, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:rgb\(255,0,0\)/); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md index 0d1b814b058..b9866bd9a29 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md @@ -16,7 +16,7 @@ dashedName: step-60 你的 `.green` CSS 規則應該有一個 `background` 屬性,其值爲 `#007F00`。 ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.green').cssText, 'background: rgb(0, 127, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:#007F00/); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md index 62355d1b85f..744d2cc4072 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -16,7 +16,7 @@ dashedName: step-66 你的 `.blue` CSS 規則應該有一個 `background` 屬性,其值爲 `hsl(240, 100%, 50%)`。 ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.blue').cssText, 'background: rgb(0, 0, 255)'); +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:hsl\(240,100%,50%\)/); ``` # --seed-- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md index 32746d43971..ebcc1bff207 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md @@ -20,7 +20,7 @@ dashedName: step-49 你的 `.red` CSS 规则应该有一个 `background` 属性,其值为 `rgb(255, 0, 0)`。 ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.red').cssText, 'background: rgb(255, 0, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:rgb\(255,0,0\)/); ``` # --seed-- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md index bad3ed671c8..21b88e46c0f 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md @@ -16,7 +16,7 @@ dashedName: step-60 你的 `.green` CSS 规则应该有一个 `background` 属性,其值为 `#007F00`。 ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.green').cssText, 'background: rgb(0, 127, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:#007F00/); ``` # --seed-- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md index 4773c6b53d8..b75cdd53620 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -16,7 +16,7 @@ dashedName: step-66 你的 `.blue` CSS 规则应该有一个 `background` 属性,其值为 `hsl(240, 100%, 50%)`。 ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.blue').cssText, 'background: rgb(0, 0, 255)'); +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:hsl\(240,100%,50%\)/); ``` # --seed-- diff --git a/curriculum/challenges/german/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml b/curriculum/challenges/german/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml new file mode 100644 index 00000000000..1592b68b7b3 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml @@ -0,0 +1,22 @@ +--- +id: 561add10cb82ac38a17523bc +title: Zertifizierung von Backend-Entwicklung und APIs +certification: back-end-development-and-apis +challengeType: 7 +isPrivate: true +tests: + - + id: bd7158d8c443edefaeb5bdef + title: Zeitstempel Microservice + - + id: bd7158d8c443edefaeb5bdff + title: Microservice zum Parsen von Anfrage-Headern + - + id: bd7158d8c443edefaeb5bd0e + title: URL-Verkürzungs-Microservice + - + id: 5a8b073d06fa14fcfde687aa + title: Übungs-Tracker + - + id: bd7158d8c443edefaeb5bd0f + title: Datei-Metadaten-Mikroservice diff --git a/curriculum/challenges/german/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml b/curriculum/challenges/german/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml new file mode 100644 index 00000000000..b1e71765f45 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml @@ -0,0 +1,23 @@ +--- +id: 5e46fc95ac417301a38fb934 +title: Zertifizierung für Datenanalyse mit Python +certification: data-analysis-with-python +challengeType: 7 +isPrivate: true +tests: + - + id: 5e46f7e5ac417301a38fb928 + title: Rechner für Mittelwert-Varianz-Standardabweichung + - + id: 5e46f7e5ac417301a38fb929 + title: Demografischer Datenanalysator + - + id: 5e46f7f8ac417301a38fb92a + title: Medizinischer Datenvisualisierer + - + id: 5e46f802ac417301a38fb92b + title: Seitenansicht Zeitreihenvisualisierer + - + id: 5e4f5c4b570f7e3a4949899f + title: Meeresspiegelvorhersage + diff --git a/curriculum/challenges/german/00-certifications/data-visualization-certification/data-visualization-certification.yml b/curriculum/challenges/german/00-certifications/data-visualization-certification/data-visualization-certification.yml new file mode 100644 index 00000000000..221b00fce00 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/data-visualization-certification/data-visualization-certification.yml @@ -0,0 +1,22 @@ +--- +id: 5a553ca864b52e1d8bceea14 +title: Zertifizierung für Datenvisualisierung +certification: data-visualization +challengeType: 7 +isPrivate: true +tests: + - + id: bd7168d8c242eddfaeb5bd13 + title: Visualisieren von Daten mithilfe eines Balkendiagramms + - + id: bd7178d8c242eddfaeb5bd13 + title: Visualisierung von Daten mithilfe eines Streudiagramms + - + id: bd7188d8c242eddfaeb5bd13 + title: Visualisieren von Daten mithilfe einer Heatmap + - + id: 587d7fa6367417b2b2512bbf + title: Visualisierung von Daten mithilfe einer Choropleth-Karte + - + id: 587d7fa6367417b2b2512bc0 + title: Visualisierung von Daten mithilfe eines Treemap-Diagramms diff --git a/curriculum/challenges/german/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml b/curriculum/challenges/german/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml new file mode 100644 index 00000000000..977c8c835fd --- /dev/null +++ b/curriculum/challenges/german/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml @@ -0,0 +1,22 @@ +--- +id: 561acd10cb82ac38a17513bc +title: Zertifizierung von Front-End-Entwicklungsbibliotheken +certification: front-end-development-libraries +challengeType: 7 +isPrivate: true +tests: + - + id: bd7158d8c442eddfaeb5bd13 + title: Erstelle eine Zufalls-Zitat-Maschine + - + id: bd7157d8c242eddfaeb5bd13 + title: Erstelle einen Markdown Vorschau-Viewer + - + id: 587d7dbc367417b2b2512bae + title: Erstelle eine Schlagzeug-Maschine + - + id: bd7158d8c442eddfaeb5bd17 + title: Erstelle einen JavaScript-Rechner + - + id: bd7158d8c442eddfaeb5bd0f + title: Erstelle eine 25 + 5 Uhr diff --git a/curriculum/challenges/german/00-certifications/information-security-certification/information-security-certification.yml b/curriculum/challenges/german/00-certifications/information-security-certification/information-security-certification.yml new file mode 100644 index 00000000000..8997e87b86b --- /dev/null +++ b/curriculum/challenges/german/00-certifications/information-security-certification/information-security-certification.yml @@ -0,0 +1,22 @@ +--- +id: 5e6021435ac9d0ecd8b94b00 +title: Zertifizierung für Informationssicherheit +certification: information-security +challengeType: 7 +isPrivate: true +tests: + - + id: 587d824a367417b2b2512c44 + title: Aktienpreisprüfer + - + id: 587d824a367417b2b2512c45 + title: Anonymes Nachrichtenbrett + - + id: 5e46f979ac417301a38fb932 + title: Port-Scanner + - + id: 5e46f983ac417301a38fb933 + title: SHA-1 Passwort-Cracker + - + id: 5e601c775ac9d0ecd8b94aff + title: Sicheres Echtzeit-Multiplayer-Spiel diff --git a/curriculum/challenges/german/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml b/curriculum/challenges/german/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml new file mode 100644 index 00000000000..f45647dd82b --- /dev/null +++ b/curriculum/challenges/german/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml @@ -0,0 +1,22 @@ +--- +id: 561abd10cb81ac38a17513bc +title: Zertifizierung für JavaScript-Algorithmen und Datenstrukturen +certification: javascript-algorithms-and-data-structures +challengeType: 7 +isPrivate: true +tests: + - + id: aaa48de84e1ecc7c742e1124 + title: Palindrom-Prüfer + - + id: a7f4d8f2483413a6ce226cac + title: Konverter für römische Zahlen + - + id: 56533eb9ac21ba0edf2244e2 + title: Cäsar-Chiffrierung + - + id: aff0395860f5d3034dc0bfc9 + title: Telefonnummern-Prüfer + - + id: aa2e6f85cab2ab736c9a9b24 + title: Registrierkasse diff --git a/curriculum/challenges/german/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml b/curriculum/challenges/german/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml new file mode 100644 index 00000000000..439c65ca26b --- /dev/null +++ b/curriculum/challenges/german/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml @@ -0,0 +1,37 @@ +--- +id: 660add10cb82ac38a17513be +title: Zertifizierung für "Legacy" Front End +certification: legacy-back-end +challengeType: 7 +isPrivate: true +tests: + - + id: bd7158d8c443edefaeb5bdef + title: Zeitstempel Microservice + - + id: bd7158d8c443edefaeb5bdff + title: Request-Header-Parser-Mikroservice + - + id: bd7158d8c443edefaeb5bd0e + title: URL-Verkürzungs-Microservice + - + id: bd7158d8c443edefaeb5bdee + title: Bildsuchabstraktionsebene + - + id: bd7158d8c443edefaeb5bd0f + title: Datei-Metadaten-Mikroservice + - + id: bd7158d8c443eddfaeb5bdef + title: Erstelle eine Abstimmungsapp + - + id: bd7158d8c443eddfaeb5bdff + title: Erstelle eine App zur Koordination des Nachtlebens + - + id: bd7158d8c443eddfaeb5bd0e + title: Chart der Börse + - + id: bd7158d8c443eddfaeb5bd0f + title: Verwalte einen Buchhandelsclub + - + id: bd7158d8c443eddfaeb5bdee + title: Erstelle einen Pinterest Klon diff --git a/curriculum/challenges/german/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml b/curriculum/challenges/german/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml new file mode 100644 index 00000000000..b388d7d5e11 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml @@ -0,0 +1,37 @@ +--- +id: 561add10cb82ac39a17513bc +title: Zertifizierung für "Legacy" Datenvisualisierung +certification: legacy-data-visualization +challengeType: 7 +isPrivate: true +tests: + - + id: bd7157d8c242eddfaeb5bd13 + title: Erstelle einen Markdown Vorschau-Viewer + - + id: bd7156d8c242eddfaeb5bd13 + title: Erstelle eine Teilnehmer-Rangliste + - + id: bd7155d8c242eddfaeb5bd13 + title: Erstelle eine Rezeptbox + - + id: bd7154d8c242eddfaeb5bd13 + title: Erstelle das Spiel des Lebens + - + id: bd7153d8c242eddfaeb5bd13 + title: Erstelle ein schurkenartiges Dungeon Crawler Spiel + - + id: bd7168d8c242eddfaeb5bd13 + title: Visualisiere Daten mit einem Balkendiagramm + - + id: bd7178d8c242eddfaeb5bd13 + title: Visualisiere Daten mit einem Scatterplot-Diagramm (Streudiagramm) + - + id: bd7188d8c242eddfaeb5bd13 + title: Visualisiere Daten mit einer Heatmap + - + id: bd7198d8c242eddfaeb5bd13 + title: Nationale Kontiguität mit einem Force Directed Graph zeigen + - + id: bd7108d8c242eddfaeb5bd13 + title: Kartendaten rund um den Globus diff --git a/curriculum/challenges/german/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml b/curriculum/challenges/german/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml new file mode 100644 index 00000000000..21e2de43682 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml @@ -0,0 +1,37 @@ +--- +id: 561add10cb82ac38a17513be +title: Zertifizierung für "Legacy" Front End +certification: legacy-front-end +challengeType: 7 +isPrivate: true +tests: + - + id: bd7158d8c242eddfaeb5bd13 + title: Erstellung einer persönlichen Portfolio-Webseite + - + id: bd7158d8c442eddfaeb5bd13 + title: Erstelle eine Zufalls-Zitat-Maschine + - + id: bd7158d8c442eddfaeb5bd0f + title: Erstelle eine 25 + 5 Uhr + - + id: bd7158d8c442eddfaeb5bd17 + title: Erstelle einen JavaScript-Rechner + - + id: bd7158d8c442eddfaeb5bd10 + title: Lokales Wetter anzeigen + - + id: bd7158d8c442eddfaeb5bd1f + title: Verwenden der Twitch JSON API + - + id: bd7158d8c442eddfaeb5bd18 + title: Style Camper News Geschichten + - + id: bd7158d8c442eddfaeb5bd19 + title: Erstelle einen Wikipedia-Viewer + - + id: bd7158d8c442eedfaeb5bd1c + title: Erstelle ein Tic Tac Toe Spiel + - + id: bd7158d8c442eddfaeb5bd1c + title: Erstelle ein Simon-Spiel diff --git a/curriculum/challenges/german/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml b/curriculum/challenges/german/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml new file mode 100644 index 00000000000..c0f7baf0e56 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml @@ -0,0 +1,25 @@ +--- +id: 561add10cb82ac38a17213bd +title: Legacy Zertifizierung für Full Stack +certification: legacy-full-stack +challengeType: 7 +isPrivate: true +tests: + - + id: 561add10cb82ac38a17513bc + title: Zertifizierung für Responsive Web Design + - + id: 561abd10cb81ac38a17513bc + title: Zertifizierung für JavaScript-Algorithmen und Datenstrukturen + - + id: 561acd10cb82ac38a17513bc + title: Zertifizierung für Front-End Bibliotheken + - + id: 5a553ca864b52e1d8bceea14 + title: Zertifizierung für Datenvisualisierung + - + id: 561add10cb82ac38a17523bc + title: Zertifizierung für API's und Microservices + - + id: 561add10cb82ac38a17213bc + title: Legacy Zertifizierung für Sicherheit und Qualitätssicherung diff --git a/curriculum/challenges/german/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml b/curriculum/challenges/german/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml new file mode 100644 index 00000000000..3ba934933ba --- /dev/null +++ b/curriculum/challenges/german/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml @@ -0,0 +1,22 @@ +--- +id: 561add10cb82ac38a17213bc +title: Legacy Zertifizierung für Informationssicherheit und Qualitätssicherung +certification: legacy-information-security-and-quality-assurance +challengeType: 7 +isPrivate: true +tests: + - + id: 587d8249367417b2b2512c41 + title: Metrisch-Imperialer Konverter + - + id: 587d8249367417b2b2512c42 + title: Issue-Tracker + - + id: 587d824a367417b2b2512c43 + title: Persönliche Bibliothek + - + id: 587d824a367417b2b2512c44 + title: Aktienpreisprüfer + - + id: 587d824a367417b2b2512c45 + title: Anonymes Nachrichtenbrett diff --git a/curriculum/challenges/german/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml b/curriculum/challenges/german/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml new file mode 100644 index 00000000000..e5ece5b06d8 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml @@ -0,0 +1,23 @@ +--- +id: 5e46fc95ac417301a38fb935 +title: Zertifizierung für Machine Learning mit Python +certification: machine-learning-with-python +challengeType: 7 +isPrivate: true +tests: + - + id: 5e46f8d6ac417301a38fb92d + title: Schere Stein Papier + - + id: 5e46f8dcac417301a38fb92e + title: Katzen- und Hundebildklassifizierer + - + id: 5e46f8e3ac417301a38fb92f + title: Buchempfehlungsprogramm mit KNN + - + id: 5e46f8edac417301a38fb930 + title: Gesundheitskostenrechner mit einer linearen Regression + - + id: 5e46f8edac417301a38fb931 + title: SMS-Textklassifizierung mittels neuronalem Netzwerk + diff --git a/curriculum/challenges/german/00-certifications/quality-assurance-certification/quality-assurance-certification.yml b/curriculum/challenges/german/00-certifications/quality-assurance-certification/quality-assurance-certification.yml new file mode 100644 index 00000000000..28d527fbacc --- /dev/null +++ b/curriculum/challenges/german/00-certifications/quality-assurance-certification/quality-assurance-certification.yml @@ -0,0 +1,23 @@ +--- +id: 5e611829481575a52dc59c0e +title: Zertifizierung für Qualitätssicherung +certification: quality-assurance +challengeType: 7 +isPrivate: true +tests: + - + id: 587d8249367417b2b2512c41 + title: Metrisch-Imperialer Konverter + - + id: 587d8249367417b2b2512c42 + title: Issue-Tracker + - + id: 587d824a367417b2b2512c43 + title: Persönliche Bibliothek + - + id: 5e601bf95ac9d0ecd8b94afd + title: Sudoku-Löser + - + id: 5e601c0d5ac9d0ecd8b94afe + title: Übersetzer Amerikanisch-Britisch + diff --git a/curriculum/challenges/german/00-certifications/relational-database-certification/relational-database-certification.yml b/curriculum/challenges/german/00-certifications/relational-database-certification/relational-database-certification.yml new file mode 100644 index 00000000000..111f74565f1 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/relational-database-certification/relational-database-certification.yml @@ -0,0 +1,22 @@ +--- +id: 606243f50267e718b1e755f4 +title: Zertifizierung für relationale Datenbanken +certification: relational-database +challengeType: 7 +isPrivate: true +tests: + - + id: 5f1a4ef5d5d6b5ab580fc6ae + title: Himmelskörperdatenbank + - + id: 5f9771307d4d22b9d2b75a94 + title: Weltmeisterschafts-Datenbank + - + id: 5f87ac112ae598023a42df1a + title: Salon-Terminplaner + - + id: 602d9ff222201c65d2a019f2 + title: Periodensystemdatenbank + - + id: 602da04c22201c65d2a019f4 + title: Zahlenratespiel diff --git a/curriculum/challenges/german/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml b/curriculum/challenges/german/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml new file mode 100644 index 00000000000..9930203ae15 --- /dev/null +++ b/curriculum/challenges/german/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml @@ -0,0 +1,22 @@ +--- +id: 561add10cb82ac38a17513bc +title: Zertifizierung für Responsive Web Design +certification: responsive-web-design +challengeType: 7 +isPrivate: true +tests: + - + id: bd7158d8c442eddfaeb5bd18 + title: Erstellung einer Tributseite + - + id: 587d78af367417b2b2512b03 + title: Erstellung eines Umfrageformulars + - + id: 587d78af367417b2b2512b04 + title: Erstellung einer Produkt-Landing-Page + - + id: 587d78b0367417b2b2512b05 + title: Erstellung einer technischen Dokumentationsseite + - + id: bd7158d8c242eddfaeb5bd13 + title: Erstellung einer persönlichen Portfolio-Webseite diff --git a/curriculum/challenges/german/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml b/curriculum/challenges/german/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml new file mode 100644 index 00000000000..629c41b106a --- /dev/null +++ b/curriculum/challenges/german/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml @@ -0,0 +1,22 @@ +--- +id: 5e44431b903586ffb414c951 +title: Zertifizierung für Wissenschaftliches Rechnen mit Python +certification: scientific-computing-with-python +challengeType: 7 +isPrivate: true +tests: + - + id: 5e44412c903586ffb414c94c + title: Arithmetischer Formatierer + - + id: 5e444136903586ffb414c94d + title: Zeitrechner + - + id: 5e44413e903586ffb414c94e + title: Budget-App + - + id: 5e444147903586ffb414c94f + title: Polygon-Flächenrechner + - + id: 5e44414f903586ffb414c950 + title: Wahrscheinlichkeitsrechner diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md new file mode 100644 index 00000000000..237616ef837 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md @@ -0,0 +1,46 @@ +--- +id: 587d774c367417b2b2512a9c +title: Füge einen alternativen Text zu einem Bild für Sehbehinderte hinzu +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cPp7VfD' +forumTopicId: 16628 +dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility +--- + +# --description-- + +Du hast wahrscheinlich ein `alt`-Attribut an einem `img`-Tag in anderen Aufgaben gesehen. `alt`-Text beschreibt den Inhalt des Bildes und bietet eine Textalternative für das Bild. Ein `alt`-Attribut hilft in Fällen, in denen das Bild nicht geladen wird oder von einem Benutzer nicht betrachtet werden kann. Suchmaschinen verwenden es auch, um zu verstehen, was ein Bild enthält, um es in die Suchergebnisse aufzunehmen. Hier ist ein Beispiel: + +```html +Company logo +``` + +Menschen mit Sehbehinderungen sind auf Screenreader angewiesen, um Webinhalte in eine Sprachausgabe umzuwandeln. Sie erhalten keine Informationen, wenn sie nur visuell dargestellt werden. Bei Bildern können Screenreader auf das `alt`-Attribut zugreifen und dessen Inhalt lesen, um wichtige Informationen zu liefern. + +Ein guter `alt` Text liefert dem Leser eine kurze Beschreibung des Bildes. Du solltest immer ein `alt`-Attribut in dein Bild einfügen. Gemäß der HTML5-Spezifikation wird dies nun als verbindlich angesehen. + +# --instructions-- + +Camper Cat ist zufällig sowohl ein Coding Ninja als auch ein tatsächlicher Ninja, der eine Website aufbaut um sein Wissen zu teilen. Das Profilbild, das er verwenden möchte, zeigt seine Fähigkeiten und sollte von allen Besuchern der Website wahrgenommen werden. Füge ein `alt`-Attribut in den `img`-Tag ein, das erklärt, dass Camper Cat Karate praktiziert. (Das Bild `src` verweist nicht auf eine tatsächliche Datei, du solltest also den `alt`-Text in der Anzeige sehen.) + +# --hints-- + +Dein `img`-Tag sollte ein `alt`-Attribut besitzen und dieses sollte nicht leer sein. + +```js +assert($('img').attr('alt')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html +Someone doing karate +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md new file mode 100644 index 00000000000..86f0086277a --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md @@ -0,0 +1,105 @@ +--- +id: 587d778b367417b2b2512aa8 +title: Füge eine barrierefreie Datumsauswahl hinzu +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cR3bRbCV' +forumTopicId: 301008 +dashedName: add-an-accessible-date-picker +--- + +# --description-- + +Formulare enthalten oft das `input`-Feld mit dem verschiedene Formularsteuerelemente erstellt werden können. Das `type`-Attribut dieses Elements gibt an, welche Art von `input`-Element erstellt wird. + +Möglicherweise hast Du den `text`- und `submit`-Tag in vorherigen Aufgaben schon gesehen. Und mit HTML5 wurde eine Option eingeführt, um ein `date`-Feld für Datumsangaben zu nutzen. Abhängig von der Browserunterstützung wird eine Datumsauswahl im `input`-Feld angezeigt, wenn es im Fokus ist, was das Ausfüllen eines Formulars für alle Benutzer erleichtert. + +Bei älteren Browsern wird der Typ standardmäßig auf `text` gesetzt, so dass es hilfreich ist, dem Benutzer das erwartete Datumsformat im `label`- oder `placeholder`-Text anzuzeigen, nur für den Fall. + +Hier ist ein Beispiel: + +```html + + +``` + +# --instructions-- + +Camper Cat stellt ein Mortal Kombat-Turnier auf die Beine und möchte seine Teilnehmer fragen, welches Datum dafür in Frage kommt. Füge ein `input`-Tag mit dem Attribut `type` `date`, dem Attribut `id` `pickdate` und dem Attribut `name` `date` ein. + +# --hints-- + +Dein Code sollte einen `input` Tag für das Datumsauswahlfeld hinzufügen. + +```js +assert($('input').length == 2); +``` + +Dein `input`-Tag sollte ein `type`-Attribut mit einem Wert `date` enthalten. + +```js +assert($('input').attr('type') == 'date'); +``` + +Dein `input`-Tag sollte ein `id`-Attribut mit einem Wert `pickdate` enthalten. + +```js +assert($('input').attr('id') == 'pickdate'); +``` + +Dein `input`-Tag sollte ein `name`-Attribut mit einem Wert `date` enthalten. + +```js +assert($('input').attr('name') == 'date'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Tournaments

+
+
+
+

Mortal Kombat Tournament Survey

+
+

Tell us the best date for the competition

+ + + + + + + + + +
+
+
+ + +``` + +# --solutions-- + +```html + +
+

Tournaments

+
+
+
+

Mortal Kombat Tournament Survey

+
+

Tell us the best date for the competition

+ + + +
+
+
+ + +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md new file mode 100644 index 00000000000..8ea62298f8a --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md @@ -0,0 +1,74 @@ +--- +id: 587d778f367417b2b2512aad +title: >- + Vermeidung von Problemen mit Farbenblindheit durch sorgfältige Auswahl von Farben, die Informationen vermitteln +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c437as3' +forumTopicId: 301011 +dashedName: >- + avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information +--- + +# --description-- + +Es gibt verschiedene Formen der Farbblindheit. Diese können von einer reduzierten Empfindlichkeit für eine bestimmte Wellenlänge des Lichts bis hin zur Unfähigkeit, überhaupt Farben zu sehen, reichen. Die häufigste Form ist eine reduzierte Empfindlichkeit zur Erkennung von Grüntönen. + +Zum Beispiel, wenn zwei ähnliche grüne Farben die Vorder- und Hintergrundfarbe deines Inhaltes sind, kann ein farbenblinder Benutzer diese möglicherweise nicht unterscheiden. Ähnliche Farben können auf dem Farbkreis als Nachbarn betrachtet werden, jedoch sollte diese Kombination bei der Übermittlung wichtiger Informationen vermieden werden. + +**Hinweis:** Einige Online-Farbauswahlwerkzeuge enthalten visuelle Simulationen, wie Farben für unterschiedliche Farbblindheiten angezeigt werden. Neben der Online-Kontrastprüfung, sind diese großartige Ressourcen. + +# --instructions-- + +Camper Cat testet verschiedene Stile für eine wichtige Schaltfläche, aber die gelbe (`#FFFF33`) Hintergrundfarbe `background-color` und die grüne (`#33FF33`) Textfarbe `color` sind benachbarte Farbtöne auf dem Farbkreis und für einige farbenblinde Benutzer praktisch nicht unterscheidbar. (Ihre ähnliche Helligkeit versagt auch bei der Prüfung des Kontrastverhältnisses). Ändere die Textfarbe `color` in dunkelblau (`#003366`), um beide Probleme zu lösen. + +# --hints-- + +Dein Code sollte die Textfarbe `color` für die Schaltfläche `button` in dunkelblau ändern. + +```js +assert($('button').css('color') == 'rgb(0, 51, 102)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+

Danger!

+
+ + +``` + +# --solutions-- + +```html + + + + +
+

Danger!

+
+ + +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md new file mode 100644 index 00000000000..035abbf4608 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md @@ -0,0 +1,84 @@ +--- +id: 587d778f367417b2b2512aac +title: Vermeide Probleme bei Farbenblindheit durch ausreichenden Kontrast +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cmzMEUw' +forumTopicId: 301012 +dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast +--- + +# --description-- + +Farbe ist ein großer Teil des visuellen Designs, dessen Verwendung allerdings zu zwei Problemen der Barrierefreiheit führt. Zuerst einmal sollte Farbe allein nicht als einzige Möglichkeit verwendet werden, um wichtige Informationen zu vermitteln, da Benutzer von Screenreadern diese nicht sehen werden. Zweitens müssen Vorder- und Hintergrundfarben einen ausreichenden Kontrast aufweisen, damit farbenblinde Benutzer sie unterscheiden können. + +Frühere Aufgaben behandelten Alternativtexte, um das erste Problem zu lösen. Die letzte Aufgabe führte Werkzeuge für die Kontrastprüfung ein, um gegen das zweite Problem vorzugehen. Das von den WCAG empfohlene Kontrastverhältnis von 4.5:1 gilt sowohl für die Verwendung von Farben als auch für Graustufenkombinationen. + +Farbenblinde Benutzer haben Schwierigkeiten, einige Farben von anderen zu unterscheiden, meistens geht es um Farbtöne aber manchmal auch um die Helligkeit. Du erinnerst dich vielleicht daran, dass das Kontrastverhältnis anhand der relativen Luminanz- (oder Helligkeits-) Werte der Vorder- und Hintergrundfarben berechnet wird. + +In der Praxis kann das Kontrastverhältnis von 4.5:1 durch Schattieren (Hinzufügen von Schwarz) der dunkleren Farbe und Abtönen (Hinzufügen von Weiß) der helleren Farbe erreicht werden. Dunklere Farbtöne auf dem Farbkreis gelten als Blautöne, Violett, Magenta und Rot, während hellere Farbtöne Orangen, Gelb, Grün und Blau-Grün sind. + +# --instructions-- + +Camper Cat experimentiert mit der Verwendung von Farbe für seinen Blogtext und -hintergrund, aber seine aktuelle Kombination aus einer grünlichen Hintergrundfarbe `background-color` mit kastanienbrauner Textfarbe `color` hat ein Kontrastverhältnis von 2.5:1. Da er die Farben mit der CSS-Eigenschaft `hsl()` (was für Farbton, Sättigung, Helligkeit steht) deklariert hat, kannst du die Helligkeit der Farben leicht anpassen, indem du das dritte Argument änderst. Erhöhe den Helligkeitswert der Hintergrundfarbe `background-color` von 35 % auf 55 % und verringere den Helligkeitswert der Farbe `color` von 20 % auf 15 %. Dadurch wird der Kontrast auf 5.9:1 verbessert. + +# --hints-- + +Dein Code sollte nur den Helligkeitswert für die Textfarbe `color` auf einen Wert von 15 % ändern. + +```js +assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi)); +``` + +Dein Code sollte nur den Helligkeitswert für die Hintergrundfarbe `background-color` auf einen Wert von 55% ändern. + +```js +assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+

Deep Thoughts with Master Camper Cat

+
+
+

A Word on the Recent Catnip Doping Scandal

+

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

+

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+
+ +``` + +# --solutions-- + +```html + + + + +
+

Deep Thoughts with Master Camper Cat

+
+
+

A Word on the Recent Catnip Doping Scandal

+

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

+

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+
+ +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md new file mode 100644 index 00000000000..af7364f66d4 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md @@ -0,0 +1,75 @@ +--- +id: 587d778f367417b2b2512aae +title: Gib Links eine Bedeutung durch die Verwendung von aussagekräftigem Linktext +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c437DcV' +forumTopicId: 301013 +dashedName: give-links-meaning-by-using-descriptive-link-text +--- + +# --description-- + +Benutzer von Screenreadern haben verschiedene Möglichkeiten, welche Art von Inhalten ihr Gerät liest. Zu diesen Optionen gehören das Springen zu (oder über) markante Elemente, das Springen zum Hauptinhalt oder das Abrufen einer Seitenübersicht aus den Überschriften. Eine andere Option ist es, nur die verfügbaren Links einer Seite zu hören. + +Screenreader tun dies, indem sie den Linktext lesen, oder das, was zwischen den Anchor-Tags (`a`) steht. Eine Liste mit "Hier klicken"- oder "Mehr lesen"-Links ist nicht hilfreich. Verwende stattdessen kurzen, aber beschreibenden Text innerhalb der `a`-Tags, um diesen Benutzern mehr zu vermitteln. + +# --instructions-- + +Der Linktext, den Camper Cat benutzt ist nicht sehr aussagekräftig ohne den ihn umgebenden Kontext. Verschiebe die Anchor-Tags (`a`) so, dass sie den Text `information about batteries` umschließen, anstatt `Click here`. + +# --hints-- + +Dein Code sollte die Anchor-Tags `a` um die Wörter `Click here` versetzen, so dass sie die Wörter `information about batteries` umschliessen. + +```js +assert( + $('a') + .text() + .match(/^(information about batteries)$/g) +); +``` + +Das `a` Element sollte ein `href` Attribut mit dem Wert eines leeren Strings `""` haben. + +```js +assert($('a').attr('href') === ''); +``` + +Das `a` Element sollte ein schliessendes Tag haben. + +```js +assert( + code.match(/<\/a>/g) && + code.match(/<\/a>/g).length === code.match(//g).length +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+

Defeating your Foe: the Red Dot is Ours!

+

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for information about batteries

+
+ +``` + +# --solutions-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+

Defeating your Foe: the Red Dot is Ours!

+

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for information about batteries

+
+ +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md new file mode 100644 index 00000000000..0705b16d038 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md @@ -0,0 +1,115 @@ +--- +id: 587d7789367417b2b2512aa4 +title: Verbessere den Zugriff auf Audio-Inhalte mit dem Audio-Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cVJVkcZ' +forumTopicId: 301014 +dashedName: improve-accessibility-of-audio-content-with-the-audio-element +--- + +# --description-- + +Das `audio`-Element von HTML5 sorgt für eine semantische Bedeutung, wenn es Sound- oder Audio-Stream-Inhalte in dein Markup einbettet. Audioinhalte benötigen auch eine Textalternative, um für gehörlose oder schwerhörige Menschen zugänglich zu sein. Dies kann mit nahegelegenem Text auf der Seite oder einem Link zu einem Transkript geschehen. + +Das `audio`-Tag unterstützt das `controls`-Attribut. Dies zeigt die Standard-Wiedergabe-, Pause- und andere Steuerelemente des Browsers an und unterstützt die Tastaturfunktionalität. Dies ist ein boolesches Attribut, d. h. es benötigt keinen Wert, sein Vorhandensein im Tag schaltet die Einstellung ein. + +Hier ist ein Beispiel: + +```html + +``` + +**Hinweis:** Multimediainhalte haben in der Regel sowohl visuelle als auch auditive Komponenten. Sie benötigt synchronisierte Untertitel und ein Transkript, damit Benutzer mit Seh- und/oder Hörbehinderungen darauf zugreifen können. Im Allgemeinen ist ein Webentwickler nicht für die Erstellung der Untertitel oder des Transkripts verantwortlich, muss aber wissen, wie er sie einfügen kann. + +# --instructions-- + +Zeit, eine Pause von Camper Cat zu machen und seinen Kollegen Zersiax (@zersiax) zu treffen, einen Meister der Barrierefreiheit und einen Screenreader-Nutzer. Um einen Clip seines Screenreaders in Aktion zu hören, füge ein `audio`-Element nach dem `p`-Tag ein. Füge das `controls`-Attribut hinzu. Dann platziere einen `source`-Tag innerhalb der `audio`-Tags, wobei das `src`-Attribut auf `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` und das `type`-Attribut auf `"audio/mpeg"` gesetzt ist. + +**Hinweis:** Der Audioclip klingt vielleicht schnell und ist schwer verständlich, aber das ist eine normale Geschwindigkeit für Benutzer von Screenreadern. + +# --hints-- + +Dein Code sollte ein `audio`-Tag haben. + +```js +assert($('audio').length === 1); +``` + +Dein `audio`-Element sollte einen schließenden Tag haben. + +```js +assert( + code.match(/<\/audio>/g).length === 1 && + code.match(/[\s\S]*<\/audio>/g) +); +``` + +Das `audio`-Tag sollte das `controls`-Attribut haben. + +```js +assert($('audio').attr('controls')); +``` + +Dein Code sollte ein `source`-Tag haben. + +```js +assert($('source').length === 1); +``` + +Dein `source`-Tag sollte sich innerhalb der `audio`-Tags befinden. + +```js +assert($('audio').children('source').length === 1); +``` + +Der Wert für das `src`-Attribut im `source`-Tag sollte genau mit dem Link in der Anleitung übereinstimmen. + +```js +assert( + $('source').attr('src') === + 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3' +); +``` + +Dein Code sollte ein `type`-Attribut im `source`-Tag mit einem Wert von audio/mpeg enthalten. + +```js +assert($('source').attr('type') === 'audio/mpeg'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Real Coding Ninjas

+
+
+

A sound clip of Zersiax's screen reader in action.

+ + + +
+ +``` + +# --solutions-- + +```html + +
+

Real Coding Ninjas

+
+
+

A sound clip of Zersiax's screen reader in action.

+ +
+ +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md new file mode 100644 index 00000000000..3e5977952ff --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md @@ -0,0 +1,161 @@ +--- +id: 587d778a367417b2b2512aa5 +title: Verbessere den Zugriff auf Diagramme mit dem Figure-Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cGJMqtE' +forumTopicId: 301015 +dashedName: improve-chart-accessibility-with-the-figure-element +--- + +# --description-- + +Mit HTML5 wurde das `figure`-Element und das zugehörige `figcaption` eingeführt. Zusammen verwendet, umschließen diese Elemente eine visuelle Darstellung (wie ein Bild, ein Diagramm oder eine Tabelle) zusammen mit ihrer Beschriftung. Durch das Zusammenfassen dieser Elemente wird der Zugriff auf den Inhalt in zweifacher Hinsicht verbessert, da zusammengehörige Inhalte semantisch gruppiert werden und eine Textalternative zur Erläuterung der Abbildung `figure` bereitgestellt wird. + +Bei Visualisierungen von Daten, wie z. B. Diagrammen, kann die Beschriftung verwendet werden, um die Trends oder Schlussfolgerungen für Benutzer mit Sehbehinderungen kurz zu erwähnen. Eine weitere Herausforderung besteht darin, wie man eine tabellarische Version der Daten des Diagramms für Screenreader-Benutzer außerhalb des Bildschirms darstellen kann (mit CSS). + +Hier ist ein Beispiel - beachte, dass das `figcaption`-Element innerhalb des `figure`-Tags steht und mit anderen Elementen kombiniert werden kann: + +```html +
+ Photo of Camper Cat executing a roundhouse kick +
+
+ Master Camper Cat demonstrates proper form of a roundhouse kick. +
+
+``` + +# --instructions-- + +Camper Cat arbeitet hart daran, ein gestapeltes Säulendiagramm zu erstellen, das zeigt, wie viel Zeit pro Woche für das Training in Tarnung, Kampf und Waffen aufgewendet werden muss. Hilf ihm, seine Seite besser zu strukturieren, indem du das `div`-Tag, das er verwendet hat, in ein `figure`-Tag und das `p`-Tag, das die Überschrift umgibt, in ein `figcaption`-Tag änderst. + +# --hints-- + +Dein Code sollte ein `figure` Tag haben. + +```js +assert($('figure').length == 1); +``` + +Dein Code sollte ein `figcaption` Tag haben. + +```js +assert($('figcaption').length == 1); +``` + +Dein Code sollte keine `div` Tags haben. + +```js +assert($('div').length == 0); +``` + +Dein Code sollte keine `p` Tags haben. + +```js +assert($('p').length == 0); +``` + +Die `figcaption`-Element sollte ein Kindelement des `figure`-Tags sein. + +```js +assert($('figure').children('figcaption').length == 1); +``` + +Dein `figure`-Element sollte ein schließendes Tag haben. + +```js +assert( + code.match(/<\/figure>/g) && + code.match(/<\/figure>/g).length === code.match(/
/g).length +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Training

+ +
+
+
+ + +
+ +
+

Breakdown per week of time to spend training in stealth, combat, and weapons.

+
+ + +
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
+
© 2018 Camper Cat
+ +``` + +# --solutions-- + +```html + +
+

Training

+ +
+
+
+
+ +
+
Breakdown per week of time to spend training in stealth, combat, and weapons.
+
+
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
+
© 2018 Camper Cat
+ +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md new file mode 100644 index 00000000000..59529f6d198 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md @@ -0,0 +1,119 @@ +--- +id: 587d778a367417b2b2512aa6 +title: Verbessere die Zugänglichkeit von Formularfeldern mit der Bezeichnung Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cGJMMAN' +forumTopicId: 301016 +dashedName: improve-form-field-accessibility-with-the-label-element +--- + +# --description-- + +Die Verbesserung der Barrierefreiheit mit semantischem HTML-Markup bezieht sich sowohl auf die Verwendung geeigneter Tag-Namen als auch Attribute. Die nächsten Aufgaben decken einige wichtige Szenarien mithilfe von Attributen in Formularen ab. + +Das `label`-Tag umschließt den Text für ein bestimmtes Formularsteuerelement, normalerweise den Namen oder die Bezeichnung für eine Auswahl. Dies bindet die Bedeutung an das Element und macht das Formular lesbarer. Das `for`-Attribut auf einem `label`-Tag verknüpft dieses `label` explizit mit dem Formularsteuerelement und wird von Screenreadern verwendet. + +In einer Lektion im Bereich Basic HTML hast du etwas über Optionsfelder und deren Labels gelernt. In der Lektion haben wir die Optionsfelder in ein `label` Element mit einem Lable Text gesetzt um diesen Text anklickbar zu machen. Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung des `for`-Attributs, wie es in dieser Lektion erklärt wird. + +Der Wert des `for`-Attributs muss mit dem Wert des `id`-Attributs des Formularsteuerelements übereinstimmen. Hier ist ein Beispiel: + +```html +
+ + +
+``` + +# --instructions-- + +Camper Cat erwartet ein großes Interesse an seinen durchdachten Blogbeiträgen und möchte ein E-Mail-Anmeldeformular einbauen. Füge ein `for`-Attribut auf dem E-Mail-`label` hinzu, das mit der `id` auf seinem `input`-Feld übereinstimmt. + +# --hints-- + +Dein Code sollte ein `for` Attribut am `label` Tag haben, das nicht leer ist. + +```js +assert($('label').attr('for')); +``` + +Dein `for` Attributwert sollte mit dem `id` Wert in der E-mail `input` übereinstimmen. + +```js +assert($('label').attr('for') == 'email'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+
+

Sign up to receive Camper Cat's blog posts by email here!

+ + + + + + + +
+
+
+

The Garfield Files: Lasagna as Training Fuel?

+

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

+
+ +
+

Defeating your Foe: the Red Dot is Ours!

+

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...

+
+ +
+

Is Chuck Norris a Cat Person?

+

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

+
+
© 2018 Camper Cat
+ +``` + +# --solutions-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+
+

Sign up to receive Camper Cat's blog posts by email here!

+ + + + + + + +
+
+
+

The Garfield Files: Lasagna as Training Fuel?

+

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

+
+ +
+

Defeating your Foe: the Red Dot is Ours!

+

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...

+
+ +
+

Is Chuck Norris a Cat Person?

+

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

+
+
© 2018 Camper Cat
+ +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md new file mode 100644 index 00000000000..232a1733798 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md @@ -0,0 +1,80 @@ +--- +id: 587d778e367417b2b2512aab +title: Verbessere Lesbarkeit mit kontrastreichem Text +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cKb3nCq' +forumTopicId: 301017 +dashedName: improve-readability-with-high-contrast-text +--- + +# --description-- + +Ein geringer Kontrast zwischen der Vorder- und Hintergrundfarbe kann die Lesbarkeit von Text erschweren. Ein ausreichender Kontrast verbessert die Lesbarkeit deiner Inhalte, aber was genau bedeutet "ausreichend"? + +Die Web Content Accessibility Guidelines (WCAG) empfehlen mindestens ein Kontrastverhältnis von 4,5 zu 1 für einen normalen Text. Das Verhältnis wird durch den Vergleich der relativen Leuchtdichtewerte zweier Farben berechnet. Dieser reicht von 1:1 für die gleiche Farbe, also kein Kontrast, bis zu 21:1 für Weiß gegen Schwarz, dem stärksten Kontrast. Im Internet kannst du viele Rechner zum Bestimmen deiner Kontrastverhältnisse finden. + +# --instructions-- + +Camper Cat benutzt eine hellgraue Farbe für seinen Text auf weißem Hintergrund, was zu einem 1,5:1 Kontrastverhältnis führt, wodurch das Lesen erschwert ist. Ändere die Textfarbe `color` von dem aktuellen Grau (`#D3D3D3`) in ein dunkleres Grau (`#636363`), um das Kontrastverhältnis auf 6:1 zu verbessern. + +# --hints-- + +Dein Code sollte die Textfarbe `color` für den `body` auf das dunklere Grau ändern. + +```js +assert($('body').css('color') == 'rgb(99, 99, 99)'); +``` + +Dein Code sollte die Hintergrundfarbe `background-color` für den `body` nicht ändern. + +```js +assert($('body').css('background-color') == 'rgb(255, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+

Deep Thoughts with Master Camper Cat

+
+
+

A Word on the Recent Catnip Doping Scandal

+

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

+

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+
+ +``` + +# --solutions-- + +```html + + + + +
+

Deep Thoughts with Master Camper Cat

+
+
+

A Word on the Recent Catnip Doping Scandal

+

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

+

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+
+ +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md new file mode 100644 index 00000000000..23c995a49da --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md @@ -0,0 +1,62 @@ +--- +id: 587d774e367417b2b2512a9f +title: Springe mit Hilfe des main Elements direkt zum Inhalt +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cPp7zuE' +forumTopicId: 301018 +dashedName: jump-straight-to-the-content-using-the-main-element +--- + +# --description-- + +Mit HTML5 wurden mehrere neue Elemente eingeführt, die Entwicklern mehr Möglichkeiten bieten und gleichzeitig Funktionen zur Barrierefreiheit enthalten. Zu diesen Tags gehören unter anderem `main`, `header`, `footer`, `nav`, `article` und `section`. + +Standardmäßig rendert ein Browser diese Elemente ähnlich wie das einfache `div`. Wenn du sie jedoch an geeigneter Stelle verwendest, verleiht das deinem Markup zusätzliche Bedeutung. Der Tag-Name allein kann schon auf die Art der darin enthaltenen Informationen hinweisen, was dem Inhalt eine semantische Bedeutung verleiht. Unterstützende Technologien können auf diese Informationen zugreifen, um ihren Benutzern eine bessere Seitenübersicht oder Navigationsoptionen zu bieten. + +Das `main`-Element wird verwendet, um (du hast es erraten) den Hauptinhalt zu umschließen, und es sollte nur eines pro Seite geben. Es soll die Informationen umfassen, die sich auf das zentrale Thema deiner Seite beziehen. Es soll keine Elemente enthalten, die sich über Seiten hinweg wiederholen, wie Navigationslinks oder Banner. + +Der `main`-Tag hat auch eine eingebettete Landmark-Funktion, die unterstützende Technologien verwenden können, um schnell zum Hauptinhalt zu navigieren. Wenn du jemals einen Link "Zum Hauptinhalt springen" am Anfang einer Seite gesehen hast, gibt die Verwendung des `main`-Tags unterstützenden Hilfsmitteln automatisch diese Funktionalität. + +# --instructions-- + +Camper Cat hat ein paar große Ideen für seine Seite über Ninjawaffen. Hilf ihm, sein Markup einzurichten, indem du öffnende und schließende `main`-Tags zwischen dem `header` und dem `footer` einfügst (Wird in anderen Herausforderungen behandelt). Lass die `main` Tags vorerst leer. + +# --hints-- + +Dein Code sollte ein `main` Tag haben. + +```js +assert($('main').length == 1); +``` + +Die `main` Tags sollten zwischen dem schließenden `header` Tag und dem öffnendem `footer` Tag sein. + +```js +assert(code.match(/<\/header>\s*?
\s*?<\/main>/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html +
+

Weapons of the Ninja

+
+ + + +
+``` + +# --solutions-- + +```html +
+

Weapons of the Ninja

+
+
+ +
+
+``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md new file mode 100644 index 00000000000..4e354847d59 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md @@ -0,0 +1,76 @@ +--- +id: 587d774c367417b2b2512a9d +title: Wissen, wann Alt-Text leer bleiben sollte +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cM9P4t2' +forumTopicId: 301019 +dashedName: know-when-alt-text-should-be-left-blank +--- + +# --description-- + +In der letzten Herausforderung hast du gelernt, dass das Einfügen eines `alt`-Attributs bei der Verwendung von `img`-Tags obligatorisch ist. Manchmal werden Bilder jedoch mit einer Beschriftung gruppiert, die sie bereits beschreibt, oder sie werden nur zur Dekoration verwendet. In diesen Fällen kann der `alt`-Text redundant oder unnötig erscheinen. + +Wenn ein Bild bereits mit Textinhalt erklärt wird oder keine Bedeutung zu einer Seite hinzufügt, benötigt das `img` immer noch ein `alt`-Attribut, aber es kann auf einen leeren String gesetzt werden. Hier ist ein Beispiel: + +```html + +``` + +Auch Hintergrundbilder fallen in der Regel unter das Stichwort "dekorativ". Allerdings werden sie in der Regel mit CSS-Regeln angewendet und sind daher nicht Teil des Markup-Screenreader-Prozesses. + +**Hinweis:** Bei Bildern mit einer Bildunterschrift solltest du trotzdem `alt`-Text einfügen, da er Suchmaschinen hilft, den Inhalt des Bildes zu katalogisieren. + +# --instructions-- + +Camper Cat hat ein Seitengerüst für den Blog-Teil seiner Website codiert. Er plant, seine beiden Artikel mit einem dekorativen Bild eines Samuraischwertes optisch zu trennen. Füge ein `alt`-Attribut zum `img`-Tag hinzu und setze es auf einen leeren String. (Beachte, dass das Bild `src` nicht auf eine tatsächliche Datei verlinkt - mache dir keine Sorgen, dass in der Anzeige keine Schwerter zu sehen sind.) + +# --hints-- + +Dein `img`-Tag sollte ein `alt`-Attribut haben. + +```js +assert(!($('img').attr('alt') == undefined)); +``` + +Das `alt`-Attribut sollte auf einen leeren String gesetzt werden. + +```js +assert($('img').attr('alt') == ''); +``` + +# --seed-- + +## --seed-contents-- + +```html +

Deep Thoughts with Master Camper Cat

+
+

Defeating your Foe: the Red Dot is Ours!

+

To Come...

+
+ + + +
+

Is Chuck Norris a Cat Person?

+

To Come...

+
+``` + +# --solutions-- + +```html +

Deep Thoughts with Master Camper Cat

+
+

Defeating your Foe: the Red Dot is Ours!

+

To Come...

+
+ + + +
+

Is Chuck Norris a Cat Person?

+

To Come...

+
+``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md new file mode 100644 index 00000000000..79c989fd2bf --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md @@ -0,0 +1,244 @@ +--- +id: 587d778d367417b2b2512aaa +title: Mache Elemente nur für einen Screenreader sichtbar, indem du selbsterstelltes CSS nutzt +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cJ8QGkhJ' +forumTopicId: 301020 +dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css +--- + +# --description-- + +Hast du bemerkt, dass bei allen Aufgaben zur Barrierefreiheit bis jetzt kein CSS verwendet wurde? Dies zeigt, wie wichtig es ist, mit einer logischen Gliederung des Dokuments und semantisch sinnvollen, den Inhalt umfassenden Tags zu beginnen, bevor man sich um den visuellen Gestaltungsaspekt kümmert. + +Allerdings kannst du mit der Magie von CSS auch die Barrierefreiheit deiner Seite verbessern, wenn du Inhalte visuell verbergen willst, die nur für Screenreader gedacht sind. Dies ist der Fall, wenn sich Informationen in einem visuellen Format befinden (wie einem Diagramm), wohingegen Screenreader eine alternative Präsentation benötigen (wie eine Tabelle), um auf die Daten zuzugreifen. CSS wird verwendet, um die ausschließlich für Screenreader bestimmten Elemente außerhalb des sichtbaren Bereichs des Browserfensters zu positionieren. + +Hier ist ein Beispiel für die CSS-Regeln, mit denen dies erreicht wird: + +```css +.sr-only { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + top: auto; + overflow: hidden; +} +``` + +**Hinweis:** Die folgenden CSS-Ansätze werden NICHT dasselbe tun: + +
    +
  • display: none; oder visibility: hidden; verbergen Inhalte für jeden, einschließlich den Nutzern von Bildschirmleseprogrammen
  • +
  • Nullwerte für Pixelgrößen; z. B. width: 0px; height: 0px; entfernt dieses Element aus dem Fluss deines Dokuments, d. h. Screenreader werden es ignorieren
  • +
+ +# --instructions-- + +Camper Cat hat für seine Trainingsseite ein wirklich cooles gestapeltes Balkendiagramm kreiert und eine Tabelle der Daten für Sehbehinderte bereitgestellt. Die Tabelle hat bereits eine `sr-only` ("nur Screenreader") Klasse, aber die CSS-Regeln sind noch nicht ausgefüllt. Gib der `position` einen `absolute` Wert. Setze den Wert für `left` auf `-10000px` und für `width` und `height` je auf `1px`. + +# --hints-- + +Dein Code sollte die Eigenschaft `position` der `sr-only` Klasse auf einen Wert von `absolute` setzen. + +```js +assert($('.sr-only').css('position') == 'absolute'); +``` + +Dein Code sollte die Eigenschaft `left` der `sr-only` Klasse auf einen Wert von `-10000px` setzen. + +```js +assert($('.sr-only').css('left') == '-10000px'); +``` + +Dein Code sollte die Eigenschaft `width` der `sr-only` Klasse auf einen Wert von `1` Pixel setzen. + +```js +assert(code.match(/width:\s*?1px/gi)); +``` + +Dein Code sollte die Eigenschaft `height` der `sr-only` Klasse auf einen Wert von `1` Pixel setzen. + +```js +assert(code.match(/height:\s*?1px/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+

Training

+ +
+
+

Master Camper Cat's Beginner Three Week Training Program

+
+ +

[Stacked bar chart]

+
+
Breakdown per week of time to spend training in stealth, combat, and weapons.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hours of Weekly Training in Stealth, Combat, and Weapons
Stealth & AgilityCombatWeaponsTotal
Week One35210
Week Two45312
Week Three46313
+
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye, world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
© 2018 Camper Cat
+ +``` + +# --solutions-- + +```html + + + + +
+

Training

+ +
+
+

Master Camper Cat's Beginner Three Week Training Program

+
+ +

[Stacked bar chart]

+
+
Breakdown per week of time to spend training in stealth, combat, and weapons.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hours of Weekly Training in Stealth, Combat, and Weapons
Stealth & AgilityCombatWeaponsTotal
Week One35210
Week Two45312
Week Three46313
+
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye, world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
© 2018 Camper Cat
+ +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md new file mode 100644 index 00000000000..038de4a56f7 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md @@ -0,0 +1,106 @@ +--- +id: 587d7790367417b2b2512aaf +title: Links mit HTML-Tastaturkürzel navigierbar machen +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cQvmaTp' +forumTopicId: 301021 +dashedName: make-links-navigable-with-html-access-keys +--- + +# --description-- + +HTML bietet die `accesskey`-Eigenschaft, um eine Shortcut-Taste zu bestimmen, die ein Element aktiviert oder in den Fokus bringt. Das Hinzufügen eines `accesskey`-Attributs kann die Navigation für Benutzer, die nur die Tastatur verwenden, effizienter machen. + +HTML5 lässt diese Eigenschaft für jedes Element zu, aber sie ist insbesondere dann nützlich, wenn man sie mit interaktiven Elementen benutzt. Dazu zählen Links, Buttons und Formularsteuerelemente. + +Hier ist ein Beispiel: + +```html + +``` + +# --instructions-- + +Camper Cat möchte, dass die Links rund um die beiden Blog-Artikel-Titel mit Tastaturkürzeln versehen werden, damit die Benutzer seiner Website schnell zur vollständigen Geschichte navigieren können. Füge ein `accesskey`-Attribut zu beiden Links hinzu und setze den ersten auf `g` (für Garfield) und den zweiten auf `c` (für Chuck Norris). + +# --hints-- + +Dein Code sollte ein `accesskey`-Attribut zum `a`-Tag mit der `id` von `first` hinzufügen. + +```js +assert($('#first').attr('accesskey')); +``` + +Dein Code sollte ein `accesskey`-Attribut zum `a`-Tag mit der `id` von `second` hinzufügen. + +```js +assert($('#second').attr('accesskey')); +``` + +Dein Code sollte das `accesskey`-Attribut auf dem `a`-Tag mit der `id` von `first` auf `g` setzen. Beachte, dass die Groß-/Kleinschreibung eine Rolle spielt. + +```js +assert($('#first').attr('accesskey') == 'g'); +``` + +Dein Code sollte das `accesskey`-Attribut auf dem `a`-Tag mit der `id` von `second` auf `c` setzen. Beachte, dass die Groß-/Kleinschreibung eine Rolle spielt. + +```js +assert($('#second').attr('accesskey') == 'c'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+ + +

The Garfield Files: Lasagna as Training Fuel?

+ + +

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

+
+
+ + +

Is Chuck Norris a Cat Person?

+ + +

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

+
+
© 2018 Camper Cat
+ +``` + +# --solutions-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+ + +

The Garfield Files: Lasagna as Training Fuel?

+ + +

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

+
+
+ + +

Is Chuck Norris a Cat Person?

+ + +

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

+
+
© 2018 Camper Cat
+ +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md new file mode 100644 index 00000000000..4a8774f0d33 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md @@ -0,0 +1,116 @@ +--- +id: 587d7788367417b2b2512aa3 +title: Vereinfache Screenreader-Navigation mit der Grenzrolle eines Footer-Elements +challengeType: 0 +videoUrl: 'https://scrimba.com/c/crVrDh8' +forumTopicId: 301022 +dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark +--- + +# --description-- + +Ähnlich wie `header` und `nav`, verfügt das Element `footer` über eine Grenzrolle, mit der Hilfsmittel schnell dorthin navigieren können. In erster Linie wird das Footer-Tag für urheberrechtliche Informationen oder weiterführende Links verwendet, die normalerweise am Ende einer Seite zu finden sind. + +# --instructions-- + +Die Übungsseite von Camper Cat macht gute Fortschritte. Ändere das `div`-Element, mit dem er seine Copyright-Information am Ende der Seite einbindet, in das neue `footer`-Element. + +# --hints-- + +Dein Code sollte ein `footer`-Tag enthalten. + +```js +assert($('footer').length == 1); +``` + +Dein Code sollte keine `div`-Tags enthalten. + +```js +assert($('div').length == 0); +``` + +Dein Code sollte ein öffnendes und schließendes `footer`-Tag enthalten. + +```js +assert(code.match(/
\s*© 2018 Camper Cat\s*<\/footer>/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Training

+ +
+
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
+ + +
© 2018 Camper Cat
+ + + +``` + +# --solutions-- + +```html + +
+

Training

+ +
+
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
+ + +
© 2018 Camper Cat
+ + + +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md new file mode 100644 index 00000000000..8fcc4f85764 --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md @@ -0,0 +1,111 @@ +--- +id: 587d7787367417b2b2512aa1 +title: Vereinfache Screenreader-Navigation mit der Grenzrolle eines Header-Elements +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cB76vtv' +forumTopicId: 301023 +dashedName: make-screen-reader-navigation-easier-with-the-header-landmark +--- + +# --description-- + +Das nächste HTML5-Element das semantische Aussagekraft verleiht und der Barrierefreiheit dient, ist das `header`-Tag (engl. "Kopfzeile"). Es wird verwendet, um einleitende Informationen oder Navigationslinks für sein übergeordnetes Tag zusammenzufassen und eignet sich gut für Inhalte, die auf mehreren Seiten oben wiederholt werden. + +`header` hat ebenfalls eine inhärente Grenzrolle, wie du das bereits von `main` kennst und erlaubt assistiven Technologien schnell zu diesem Inhalt zu navigieren. + +**Hinweis:** Der `header` ist für den `body` des HTML-Dokuments vorgesehen. Er unterscheidet sich vom `head`-Element, welches den Seitentitel, Metainformationen, etc. beinhaltet. + +# --instructions-- + +Camper Cat schreibt einige großartige Artikel über Ninja-Training und möchte eine Seite für sie zu seiner Website hinzufügen. Ändere das obere `div`, welches im Moment das `h1`-Element beinhaltet, in ein `header`-Tag. + +# --hints-- + +Dein Code sollte ein `header`-Tag beinhalten. + +```js +assert($('header').length == 1); +``` + +Dein `header`-Tag sollte das `h1`-Element umfassen. + +```js +assert($('header').children('h1').length == 1); +``` + +Dein Code sollte keine `div`-Tags enthalten. + +```js +assert($('div').length == 0); +``` + +Dein `header`-Element sollte ein schließendes Tag haben. + +```js +assert( + code.match(/<\/header>/g) && + code.match(/<\/header>/g).length === code.match(/
/g).length +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+

Training with Camper Cat

+
+ + +
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
+ +``` + +# --solutions-- + +```html + + +
+

Training with Camper Cat

+
+ + +
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
+ +``` diff --git a/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md new file mode 100644 index 00000000000..cf130ee275e --- /dev/null +++ b/curriculum/challenges/german/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md @@ -0,0 +1,121 @@ +--- +id: 587d7788367417b2b2512aa2 +title: Vereinfache Screenreader-Navigation mit der Grenzrolle eines Nav-Elements +challengeType: 0 +videoUrl: 'https://scrimba.com/c/czVwWSv' +forumTopicId: 301024 +dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark +--- + +# --description-- + +Das `nav`-Element ist ein weiteres HTML5-Element mit inhärenter Grenzrolle zur einfacheren Navigation per Screenreader. Dieses Tag soll die wichtigsten Navigationslinks auf deiner Seite umfassen. + +Wenn Links sich am Ende der Seite wiederholen, ist es unnötig, diese auch mit einem `nav`-Tag zu markieren. Die Verwendung eines `footer` (wird in der nächsten Aufgabe behandelt) genügt. + +# --instructions-- + +Camper Cat fügte Navigationslinks oben auf seiner Trainingsseite hinzu, umgab sie aber mit einem `div`. Ändere das `div` in ein `nav`-Tag, um die Barrierefreiheit auf seiner Seite zu verbessern. + +# --hints-- + +Dein Code sollte ein `nav`-Tag enthalten. + +```js +assert($('nav').length == 1); +``` + +Deine `nav`-Tags sollten die `ul` und deren Listenelemente umhüllen. + +```js +assert($('nav').children('ul').length == 1); +``` + +Dein Code sollte keine `div`-Tags mehr enthalten. + +```js +assert($('div').length == 0); +``` + +Dein `nav`-Element sollte ein schließendes Tag haben. + +```js +assert( + code.match(/<\/nav>/g) && + code.match(/<\/nav>/g).length === code.match(/
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +--fcc-editable-region-- +h2 { + border-bottom: 4px solid #dfdfe2; + +} +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md new file mode 100644 index 00000000000..e22f6d07981 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md @@ -0,0 +1,336 @@ +--- +id: 6148e0bcc13efd10f7d7a6a9 +title: Schritt 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Setze die `footer` Hintergrundfarbe auf `#2a2a40` und verwende _Flexbox_, um den Text horizontal zu zentrieren. + +# --hints-- + +Du solltest den `footer` Element-Selektor verwenden. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('footer')); +``` + +Du solltest dem `footer` eine `background-color` von `#2a2a40` geben. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)'); +``` + +Du solltest dem `footer` ein `display` von `flex` geben. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex'); +``` + +Du solltest dem `footer` ein `justify-content` von `center` geben. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md new file mode 100644 index 00000000000..47a984abb3f --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md @@ -0,0 +1,359 @@ +--- +id: 6148e28706b34912340fd042 +title: Schritt 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Zentriere den gesamten Text horizontal innerhalb des `address`-Elements und füge einige Padding-Einheiten hinzu. + +# --hints-- + +Du solltest den `address` Element-Selektor verwenden. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('address')); +``` + +Du solltest `address` ein `text-align` von `center` geben. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center'); +``` + +Du solltest `address` ein `padding-top` von mindestens `1px` geben. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-top')?.replace(/\D\D+/, '')), 1); +``` + +Du solltest `address` ein `padding-right` von mindestens `1px` geben. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-right')?.replace(/\D\D+/, '')), 1); +``` + +Du solltest `address` ein `padding-bottom` von mindestens `1px` geben. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-bottom')?.replace(/\D\D+/, '')), 1); +``` + +Du solltest `address` ein `padding-left` von mindestens `1px` geben. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-left')?.replace(/\D\D+/, '')), 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md new file mode 100644 index 00000000000..2152a6882a5 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md @@ -0,0 +1,342 @@ +--- +id: 6148e335c1edd512d00e4691 +title: Schritt 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Wenn du auf die Navigationslinks klickst, sollte das Ansichtsfenster zu dem entsprechenden Abschnitt springen. Dieses Springen kann jedoch für manche Benutzer verwirrend sein. + +Wähle alle Elemente aus und setze das `scroll-behavior` auf `smooth`. + +# --hints-- + +Du solltest den Selektor `*` verwenden. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Du solltest `*` ein `scroll-behavior` von `smooth` geben. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md new file mode 100644 index 00000000000..3cc7276c981 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md @@ -0,0 +1,685 @@ +--- +id: 6148e5aeb102e3142de026a2 +title: Schritt 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Endlich kann die Verfügbarkeit der Navigation durch die Bereitstellung von Tastaturkürzeln verbessert werden. + +Das Attribut `accesskey` akzeptiert eine durch Leerzeichen getrennte Liste von Zugangsschlüsseln. Zum Beispiel: + +```html + +``` + +Gib jedem der Navigationslinks einen Zugangsschlüssel mit einem Buchstaben. + +_Hinweis: Es ist nicht immer ratsam, Zugangsschlüsseln zu verwenden, aber sie können nützlich sein_ + +Gut gemacht. Du hast das Übungsprojekt _Barrierefreiheit-Quiz_ abgeschlossen. + +# --hints-- + +Du solltest dem ersten `a`-Element einen aus einem einzigen Buchstaben bestehenden `accesskey` geben. + +```js +assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1); +``` + +Du solltest dem zweiten `a`-Element einen aus einem einzigen Buchstaben bestehenden `accesskey` geben. + +```js +assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1); +``` + +Du solltest dem dritten `a`-Element einen aus einem einzigen Buchstaben bestehenden `accesskey` geben. + +```js +assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` + +## --solutions-- + +```html + + + + + + + + Accessibility Quiz + + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+ +
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: fixed; + background-color: #1b1b32; + top: 0; +} + +#logo { + width: max(100px, 18vw); + aspect-ratio: 35 / 4; + max-height: 100%; + background-color: #0a0a23; + padding: 0.4rem; +} + +h1 { + text-align: center; + font-size: min(5vw, 1.2em); + color: #f1be32; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + display: block; + margin: 0 0.2rem; + color: #dfdfe2; + padding: 0.2rem; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0px auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + + +.info { + margin: 0 auto; + padding: 10px 0 0 5px; +} +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, +.info input { + display: inline-block; + text-align: right; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.info input { + width: 50%; + text-align: left; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md new file mode 100644 index 00000000000..aa23aabc917 --- /dev/null +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md @@ -0,0 +1,135 @@ +--- +id: 5f3ef6e06d34faac0447fc44 +title: Schritt 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Mache den `Est. 2020`-Text kursiv, indem du einen `established`-Klassenselektor erstellst und ihm die `font-style`-Eigenschaft mit dem Wert `italic` gibst. + +# --hints-- + +Du solltest einen `.established`-Selektor haben. + +```js +const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established'); +assert(hasEstablished); +``` + +Du solltest die `font-style`-Eigenschaft auf `italic` setzen. + +```js +const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic'); +assert(hasFontStyle); +``` + +Dein `.established`-Selektor sollte die `font-style`-Eigenschaft auf `italic` setzen. + +```js +const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style'); +assert(establishedFontStyle === 'italic'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + + + + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md b/curriculum/challenges/italian/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md index 46952f222d6..bcf98241d03 100644 --- a/curriculum/challenges/italian/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md +++ b/curriculum/challenges/italian/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md @@ -22,11 +22,11 @@ Content-Length: 20 name=John+Doe&age=25 ``` -Come puoi vedere, il corpo è codificato come la query string. Questo è il formato predefinito usato dai moduli HTML. Con Ajax, è anche possibile utilizzare JSON per gestire dati che hanno una struttura più complessa. C'è anche un altro tipo di codifica: multipart/form-data. Questo viene utilizzato per caricare file binari. In questo esercizio, utilizzerai un corpo urlencoded. Per analizzare i dati provenienti dalle richieste POST, dovrai installare il pacchetto `body-parser`. Questo pacchetto consente di utilizzare una serie di middleware, che possono decodificare i dati in diversi formati. +Come puoi vedere, il corpo è codificato come la query string. Questo è il formato predefinito usato dai moduli HTML. Con Ajax, è anche possibile utilizzare JSON per gestire dati che hanno una struttura più complessa. C'è anche un altro tipo di codifica: multipart/form-data. Questo viene utilizzato per caricare file binari. In questo esercizio, utilizzerai un corpo codificato nell'URL. Per analizzare i dati provenienti dalle richieste POST, dovrai installare il pacchetto `body-parser`. Questo pacchetto consente di utilizzare una serie di middleware, che possono decodificare i dati in diversi formati. # --instructions-- -Installa il modulo `body-parser` nel tuo `package.json`. Poi, richiedilo con `require` all'inizio del file. Memorizzalo in una variabile chiamata `bodyParser`. Il middleware per gestire i dati urlencoded viene restituito da `bodyParser.urlencoded({extended: false})`. Passa ad `app.use()` la funzione restituita dal metodo invocato prima. Come al solito, il middleware deve essere montato prima di tutte le rotte che dipendono da esso. +Il pacchetto `body-parser` è già stato installato ed è nel file `package.json` del tuo progetto. Richiedilo con `require` nella parte superiore del file `myApp.js` e memorizzalo in una variabile chiamata `bodyParser`. Il middleware per gestire i dati codificati nell'URL viene restituito da `bodyParser.urlencoded({extended: false})`. Passa ad `app.use()` la funzione restituita dal metodo invocato prima. Come al solito, il middleware deve essere montato prima di tutte le rotte che dipendono da esso. **Nota:** `extended` è un'opzione di configurazione che dice al `body-parser` quale analisi deve essere utilizzata. Quando `extended=false` viene utilizzata la libreria di codifica classica `querystring`. Quando `extended=true` viene usata per il parsing la libreria `qs`. diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md index 34f307e827a..92967ecff58 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md @@ -20,7 +20,7 @@ Nella regola CSS `.red`, modifica la proprietà `background-color` in `backgroun La regola CSS `.red` dovrebbe avere una proprietà `background` con il valore `rgb(255, 0, 0)`. ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.red').cssText, 'background: rgb(255, 0, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:rgb\(255,0,0\)/); ``` # --seed-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md index f174c626a23..1d19e682d38 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md @@ -16,7 +16,7 @@ Nella regola CSS `.green`, modifica la proprietà `background-color` in `backgro La regola CSS `.green` dovrebbe avere una proprietà `background` con il valore `#007F00`. ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.green').cssText, 'background: rgb(0, 127, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:#007F00/); ``` # --seed-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md index ec9ca59f377..4c1c4b4b794 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -16,7 +16,7 @@ Nella regola CSS `.blue`, modifica la proprietà `background-color` in `backgrou La regola CSS `.blue` dovrebbe avere una proprietà `background` con il valore `hsl(240, 100%, 50%)`. ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.blue').cssText, 'background: rgb(0, 0, 255)'); +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:hsl\(240,100%,50%\)/); ``` # --seed-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md index b592f1e57cd..d46feee7c7d 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md @@ -9,11 +9,11 @@ dashedName: step-1 Gli elementi HTML hanno un tag di apertura come `

` e un tag di chiusura come `

`. +Il testo di un elemento va tra i tag di apertura e di chiusura. + Trova l'elemento `h1` e cambia il suo testo in: - `CatPhotoApp` - -Assicurati che il testo si trovi tra i suoi tag di apertura e chiusura. +`CatPhotoApp` # --hints-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md index e45d5e35d17..2e068dff799 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md @@ -7,9 +7,9 @@ dashedName: step-9 # --description-- -Tipicamente, l'HTML è renderizzato in modo top-down. Gli elementi in cima al codice sono posizionati nella parte superiore della pagina. Tuttavia, spesso è possibile che tu voglia spostare gli elementi in posizioni diverse. Puoi farlo con l'attributo `position`. +Tipicamente, l'HTML è renderizzato in modo top-down. Gli elementi in cima al codice sono posizionati nella parte superiore della pagina. Tuttavia, spesso è possibile che tu voglia spostare gli elementi in posizioni diverse. Puoi farlo grazie alla proprietà `position`. -Imposta l'attributo `position` per l'elemento `back-wall` su `absolute`. Il valore `absolute` toglie l'elemento dal flusso top-down del documento e ti permette di spostarlo relativamente al suo contenitore. +Imposta la proprietà `position` per l'elemento `back-wall` sul valore `absolute`. Il valore `absolute` toglie l'elemento dal flusso top-down del documento e ti permette di spostarlo relativamente al suo contenitore. Puoi spostare manualmente il layout di un elemento con `top`, `left`, `right` e `bottom`. Assegna all'elemento `back-wall` una proprietà `top` di `0` e una proprietà `left` di `0`. diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md index 398b3a814a6..5ad21d361cd 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md @@ -20,7 +20,7 @@ CSS で均一な色を設定する方法をいくつか学んできましたが `.red` CSS ルールには `background` プロパティと値 `rgb(255, 0, 0)` が必要です。 ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.red').cssText, 'background: rgb(255, 0, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:rgb\(255,0,0\)/); ``` # --seed-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md index ff0bbc55960..3a76428a3d2 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md @@ -16,7 +16,7 @@ dashedName: step-60 `.green` CSS ルールには `background` プロパティと値 `#007F00` が必要です。 ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.green').cssText, 'background: rgb(0, 127, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:#007F00/); ``` # --seed-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md index 5e5e5102539..0ede13691c4 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -16,7 +16,7 @@ dashedName: step-66 `.blue` CSS ルールには `background` プロパティと値 `hsl(240, 100%, 50%)` が必要です。 ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.blue').cssText, 'background: rgb(0, 0, 255)'); +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:hsl\(240,100%,50%\)/); ``` # --seed-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md new file mode 100644 index 00000000000..5f6bf5a6f52 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -0,0 +1,94 @@ +--- +id: 5ef9b03c81a63668521804d2 +title: ステップ 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +順序付きリスト (ordered list、`ol`) のコードは順序なしリストと似ていますが、順序付きリストのリスト項目は番号付きで表示されます。 + +2 つ目の `section` 要素内で、最後の `h3` 要素の後に、順序付きリストと下記リスト項目を追加してください: + +`flea treatment` `thunder` `other cats` + +# --hints-- + +`ol` 要素には開始タグが必要です。 開始タグは `` のような形式の構文です。 + +```js +assert(document.querySelector('ol')); +``` + +`ol` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。 + +```js +assert(code.match(/<\/ol>/)); +``` + +`ol` 要素は、2 つ目の `section` 要素の終了タグの上にある必要があります。 順番が誤っているようです。 + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'OL'); +``` + +3 つの `li` 要素は、`ol` 要素の中に入れ子にする必要があります。 + +```js +assert( + [...document.querySelectorAll('li')].filter( + (item) => item.parentNode.nodeName === 'OL' + ).length === 3 +); +``` + +3 つの `li` 要素に、テキスト `flea treatment`、`thunder`、`other cats` が任意の順番で設定されている必要があります。 + +```js +assert.deepStrictEqual( + [...document.querySelectorAll('li')] + .filter((item) => item.parentNode.nodeName === 'OL') + .map((item) => item.innerText.toLowerCase()) + .sort((a, b) => a.localeCompare(b)), + ['flea treatment', 'other cats', 'thunder'] +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+--fcc-editable-region-- +

Top 3 things cats hate:

+--fcc-editable-region-- +
+
+ + + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md new file mode 100644 index 00000000000..52bdbc921f6 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md @@ -0,0 +1,72 @@ +--- +id: 5ef9b03c81a63668521804d3 +title: ステップ 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +順序付きリストの後に、もう 1 つ `figure` 要素を追加してください。 + +# --hints-- + +`figure` 要素には開始タグが必要です。 開始タグは `` のような形式の構文です。 + +```js +assert(document.querySelectorAll('figure').length === 2); +``` + +`figure` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。 + +```js +assert(code.match(/<\/figure>/g).length === 2); +``` + +2 つ目の `section` 要素の終了タグのすぐ上に `figure` 要素が必要です。 + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+--fcc-editable-region-- +
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md new file mode 100644 index 00000000000..b295f3297b0 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md @@ -0,0 +1,96 @@ +--- +id: 5ef9b03c81a63668521804d4 +title: ステップ 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +`strong` 要素は、あるテキストの重要性や緊急性が高いことを示すために使われます。 + +先ほど追加した `figcaption` 内で、`hate` を `strong` 要素で囲んで重要性が高いことを示しましょう。 + +# --hints-- + +`strong` 要素には開始タグが必要です。 開始タグは `` のような形式の構文です。 + +```js +assert(document.querySelector('strong')); +``` + +`strong` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。 + +```js +assert(code.match(/<\/strong\>/)); +``` + +`strong` 要素が、`Cats hate other cats.` というテキスト内の単語 `hate` を囲む必要があります。 テキストが設定されていないか、誤字脱字があります。 + +```js +assert( + document + .querySelectorAll('figcaption')[1] + .querySelector('strong') + .innerText.toLowerCase() === 'hate' +); +``` + +`figcaption` のテキストは `Cats hate other cats.` でなければなりません。 誤字がないか、`strong` 要素の開始タグと終了タグの前後に適切なスペースがあるか確認してください。 + +```js +const secondFigCaption = document.querySelectorAll('figcaption')[1]; +assert( + secondFigCaption && + secondFigCaption.innerText + .replace(/\s+/gi, ' ') + .trim() + .match(/cats hate other cats\.?/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +--fcc-editable-region-- +
Cats hate other cats.
+--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md new file mode 100644 index 00000000000..45bf4ad7eb8 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md @@ -0,0 +1,105 @@ +--- +id: 5ef9b03c81a63668521804d5 +title: ステップ 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +3 つ目の `section` 要素内に、次のテキストを持つ `h2` 要素を追加してください: + +`Cat Form` + +# --hints-- + +3 つ目の `section` 要素が見つかりません。 要素自体、または開始タグや終了タグが誤って削除された可能性があります。 + +```js +assert( + document.querySelectorAll('section').length === 3 && + code.match(/<\/section>/g).length === 3 +); +``` + +`h2` 要素には開始タグおよび終了タグが必要です。 必要なタグの片方、または両方が欠けている可能性があります。 + +```js +assert( + document.querySelectorAll('h2').length >= 3 && + code.match(/<\/h2>/g).length >= 3 +); +``` + +`h2` 要素を 1 つだけ追加してください。 余分なものは削除してください。 + +```js +assert(document.querySelectorAll('h2').length === 3); +``` + +新しい `h2` 要素は、3 つ目の `section` 要素の終了タグのすぐ上にある必要があります。 + +```js +const thirdSection = document.querySelectorAll('section')[2]; +assert(thirdSection.lastElementChild.nodeName === 'H2'); +``` + +`h2` 要素のテキストは `Cat Form` でなければなりません。 + +```js +const thirdSection = document.querySelectorAll('section')[2]; +assert( + thirdSection + .querySelector('h2') + .innerText.toLowerCase() + .replace(/\s+/g, ' ') === 'cat form' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md index ba49ea08030..e5fc8ffb0df 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md @@ -20,7 +20,7 @@ Na regra do CSS `.red`, altere a propriedade `background-color` para `background A regra do CSS `.red` deve ter uma propriedade `background` com o valor `rgb(255, 0, 0)`. ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.red').cssText, 'background: rgb(255, 0, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:rgb\(255,0,0\)/); ``` # --seed-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md index 7565c8dec66..e18b2b49071 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md @@ -16,7 +16,7 @@ Na regra do CSS `.green`, altere a propriedade `background-color` para `backgrou A regra do CSS `.green` deve ter uma propriedade `background` com o valor `#007F00`. ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.green').cssText, 'background: rgb(0, 127, 0)'); +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:#007F00/); ``` # --seed-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md index 2d88ab5275c..08670c44a1c 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -16,7 +16,7 @@ Na regra do CSS `.blue`, altere a propriedade `background-color` para `backgroun A regra do CSS `.blue` deve ter uma propriedade `background` com o valor `hsl(240, 100%, 50%)`. ```js -assert.include(new __helpers.CSSHelp(document).getStyle('.blue').cssText, 'background: rgb(0, 0, 255)'); +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:hsl\(240,100%,50%\)/); ``` # --seed-- diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md index 527b75cbe42..fa0af8c663e 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md @@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element Властивість `box-shadow` додає одну або більше тіней до елемента. -Властивість `box-shadow` приймає значення +Властивість `box-shadow` приймає такі значення, за порядком:
    -
  • offset-x (наскільки далеко відсунути тінь від елемента по горизонталі)
  • -
  • offset-y (наскільки далеко відсунути тінь від елемента по вертикалі)
  • -
  • blur-radius,
  • -
  • spread-radius і
  • -
  • color, в такому порядку.
  • +
  • offset-x (наскільки далеко відсунута тінь від елемента по горизонталі)
  • +
  • offset-y (наскільки далеко відсунута тінь від елемента по вертикалі)
  • +
  • blur-radius
  • +
  • spread-radius
  • +
  • color
Значення `blur-radius` та `spread-radius` є необов'язковими. diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md index a9d1899fe07..dbe7174970e 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md @@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color # --description-- -Кольори мають декілька характеристик, включно з відтінком, насиченістю та яскравістю. У CSS3 властивість `hsl()` представлена як альтернативний спосіб вибору кольору, з налаштуванням усіх трьох характеристик. +Кольори мають декілька характеристик, включно з відтінком, насиченістю та яскравістю. CSS3 представив функцію `hsl()` як альтернативний спосіб вибору кольору шляхом прямого визначення цих характеристик. Під**відтінком** люди часто розуміють колір. Якщо уявити спектр кольорів, починаючи з червоного зліва, через зелений посередині, і закінчуючи синім справа, то відтінок - це місце на цій лінії, де знаходиться колір. У `hsl()`, для визначення відтінку замість спектру використовується концепція колірного кола, де кут кольору на окружності задається значенням від 0 до 360. @@ -27,19 +27,19 @@ dashedName: adjust-the-hue-of-a-color # --hints-- -Ви маєте використати властивість `hsl()`, щоб задати зелений колір `green`. +Ваш код повинен використовувати функцію `hsl()`, щоб декларувати зелений колір. ```js assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi)); ``` -Ви маєте використати властивість `hsl()`, щоб задати блакитний колір `cyan`. +Ваш код повинен використовувати функцію `hsl()`, щоб декларувати блакитний колір. ```js assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi)); ``` -Ви маєте використати властивість `hsl()`, щоб задати синій колір `blue`. +Ваш код повинен використовувати функцію `hsl()`, щоб декларувати синій колір. ```js assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi)); diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md index 14c3ef64bbf..6d6361a31bc 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md @@ -15,11 +15,11 @@ dashedName: create-a-graphic-using-css Щоб створити круглий об'єкт, необхідно задати властивості `border-radius` значення 50%. -Як ви могли помітити в попередньому завданні, властивість `box-shadow` приймає значення: `offset-x`, `offset-y`, `blur-radius`, `spread-radius` і значення кольору. Значення `blur-radius` і `spread-radius` необов'язкові. +Як ви могли помітити в попередньому завданні, властивість `box-shadow` приймає значення для `offset-x`, `offset-y`, `blur-radius`, `spread-radius` та `color`, в такому ж порядку. Значення `blur-radius` і `spread-radius` необов'язкові. # --instructions-- -Керуйте квадратним елементом у редакторі, щоб створити форму місяця. Спочатку змініть `background-color` на `transparent`, тоді надайте властивості `border-radius` значення 50%, щоб створити круглу форму. Вкінці змініть властивість `box-shadow`, щоб надати властивості `offset-x` значення 25 пікселів, властивості `offset-y` - 10 пікселів, `blur-radius` - 0, `spread-radius` - 0, а за допомогою властивості `blue` встановити колір. +Керуйте квадратним елементом у редакторі, щоб створити форму місяця. Спочатку змініть `background-color` на `transparent`, тоді надайте властивості `border-radius` значення 50%, щоб створити круглу форму. Зрештою, змініть властивість `box-shadow`, щоб встановити `offset-x` на 25 пікселів, `offset-y` на 10 пікселів, `blur-radius` на 0, `spread-radius` на 0, а `color` на `blue`. # --hints-- @@ -35,7 +35,7 @@ assert(code.match(/background-color:\s*?transparent;/gi)); assert(code.match(/border-radius:\s*?50%;/gi)); ``` -Значення властивості `box-shadow` повинно мати значення 25 пікселів для `offset-x`, 10 пікселів для `offset-y`, 0 для `blur-radius`, 0 для `spread-radius`, та колір має бути задано за допомогою `blue`. +Значення властивості `box-shadow` повинне бути 25 пікселів для `offset-x`, 10 пікселів для `offset-y`, 0 для `blur-radius`, 0 для `spread-radius`, а також `blue` для `color`. ```js assert( diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md index 1ad0052da28..bd3ed4c95bb 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md @@ -28,15 +28,15 @@ dashedName: create-a-more-complex-shape-using-css-and-html # --instructions-- -Перетворіть елемент на екрані на серце. У селекторі `heart::after` замініть фоновий колір `background-color` на `pink` і встановіть значення `border-radius` на 50%. +Перетворіть елемент на екрані на серце. У селекторі `.heart::after` змініть `background-color` на `pink` та `border-radius` на 50%. Потім оберіть елемент з класом `heart` (тільки `heart`) і заповніть властивість `transform`. Використовуйте функцію `rotate()` з -45 градусами. -Нарешті, у селекторі `heart::before` встановіть його властивість `content` на порожній рядок. +Зрештою, у селекторі `.heart::before` встановіть властивість `content` на порожній рядок. # --hints-- -Властивість `background-color` селектора `heart::after` має бути `pink`. +Селектор `.heart::after` повинен мати властивість `background-color` зі значенням `pink`. ```js const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0]; @@ -45,7 +45,7 @@ assert( ); ``` -`border-radius` селектора `heart::after` повинен мати значення 50%. +Властивість `border-radius` селектора `.heart::after` повинна мати значення 50%. ```js assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2); @@ -57,7 +57,7 @@ assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2); assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi)); ``` -Елемент `content` селектора `heart::before` має бути порожнім рядком. +`content` селектора `.heart::before` повинен бути порожнім рядком. ```js assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi)); diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md index 05568a16b32..e6dac82592f 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md @@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic У попередньому завданні йшлося про ключове слово `ease-out`, яке описує зміну анімації, що спочатку пришвидшується, а тоді уповільнюється в кінці анімації. Праворуч показано різницю між ключовим словом `ease-out` (для синього елемента) і ключовим словом `linear` (для червоного елемента). Подібну послідовність анімації до ключового слова `ease-out` можна створити за допомогою користувацької функції кубічної кривої Безьє. -Загалом зміна точок прив'язки `p1` та `p2` керує створенням різних кривих Безьє, що контролює розвиток анімації в часі. Ось приклад кривої Безьє, створеної за допомогою значень для імітації стилю зсунення зі зникненням (ease-out): +Загалом зміна точок прив'язки `p1` та `p2` керує створенням різних кривих Безьє, що контролює розвиток анімації в часі. Ось приклад кривої Безьє, створеної за допомогою значень для імітації стилю `ease-out`: ```css animation-timing-function: cubic-bezier(0, 0, 0.58, 1); @@ -21,7 +21,7 @@ animation-timing-function: cubic-bezier(0, 0, 0.58, 1); # --instructions-- -Щоб побачити результат цієї кривої Безьє в дії, змініть `animation-timing-function` елемента з ідентифікацією `red` на функцію `cubic-bezier` зі значеннями х1, y1, x2, y2, які вказані відповідно до 0, 0, 0.58, 1. Завдяки цьому обидва елементи будуть однаково просуватися по анімації. +Щоб побачити результат цієї кривої Безьє в дії, змініть `animation-timing-function` елемента з ідентифікацією `red` на функцію `cubic-bezier` зі значеннями х1, y1, x2, y2, які вказані відповідно до `0, 0, 0.58, 1`. Завдяки цьому обидва елементи будуть однаково просуватися по анімації. # --hints-- diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md index be4cdc4c722..02193d79cc6 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md @@ -47,7 +47,7 @@ assert(!code.match(/90deg/gi)); assert(code.match(/yellow\s+?0(px)?/gi)); ``` -Один стоп-колір на рівні 40 пікселів повинен бути `yellow` (жовтий). +Перший стоп-колір на 40 пікселях повинен бути `yellow`. ```js assert(code.match(/yellow\s+?40px/gi)); diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md index ed0c65faa4b..7ac5aa3236e 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md @@ -11,7 +11,7 @@ dashedName: change-a-variable-for-a-specific-area Коли ви створюєте ваші змінні в `:root`, вони установлять значення змінної величини для цілої сторінки. -Ви можете перезаписати ці змінні вставивши їх знову у спеціальний елемент. +Ви можете перезаписати ці змінні, вставивши їх знову у спеціальний селектор. # --instructions-- @@ -27,7 +27,7 @@ assert( ); ``` -Клас `penguin` не повинен містити властивість `background-color` +Клас `penguin` не повинен містити властивість `background-color`. ```js assert( diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/create-a-custom-css-variable.md b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/create-a-custom-css-variable.md index 006a5caa564..9c133289077 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/create-a-custom-css-variable.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/create-a-custom-css-variable.md @@ -15,7 +15,7 @@ dashedName: create-a-custom-css-variable --penguin-skin: gray; ``` -Це створить змінну з назвою `--penguin-skin` і надасть їй значення `gray`. Тепер ви можете використовувати цю змінну в іншому місці вашого CSS, щоб змінювати значення інших елементів на сірий. +Це створить змінну з назвою `--penguin-skin` і надасть їй значення `gray`. Тепер ви можете використовувати цю змінну в іншому місці свого CSS, щоб змінювати значення інших властивостей на сірий. # --instructions-- diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/import-a-google-font.md b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/import-a-google-font.md index 1300653a331..3f6ad47ee0e 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/import-a-google-font.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/import-a-google-font.md @@ -11,7 +11,7 @@ dashedName: import-a-google-font На доповнення до загальних шрифтів, які є в більшості операційних систем, ми також можемо встановити нестандартні, користувацькі веб-шрифти для використання на нашому сайті. У Інтернеті існує багато джерел веб-шрифтів. Але для прикладу ми використаємо бібліотеку Google Fonts. -[Google Fonts](https://fonts.google.com/) є безкоштовною бібліотекою веб-шрифтів, які можна використати у CSS, посилаючись на URL-адресу шрифту. +Google Fonts – це безоплатна бібліотека вебшрифтів, які можна використати у CSS, посилаючись на URL-адресу шрифту. Що ж, давайте почнемо імпортувати і застосувати шрифт Google (зауважте, що якщо Google заблокований у вашій країні, то вам потрібно пропустити це завдання). diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md index f9d32aa9126..9b20e7c6129 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md @@ -77,7 +77,7 @@ assert( ); ``` -Елемент `h1` повинен успадкувати зелений колір від елемента `body`. +Елемент `h1` повинен успадкувати колір `green` від елементу `body`. ```js assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)'); diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md index 0ded4c906fc..f25914c22da 100644 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md +++ b/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md @@ -27,7 +27,7 @@ class="class1 class2" **Примітка:** Порядок, в якому перераховані класи в HTML елементі не має значення. -Натомість, порядок об'яв `class` у розділі `