mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-29 16:00:55 -04:00
chore(i18n,learn): processed translations (#47330)
This commit is contained in:
camperbot
@@ -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--
|
||||
|
||||
@@ -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--
|
||||
|
||||
@@ -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--
|
||||
|
||||
@@ -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--
|
||||
|
||||
@@ -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--
|
||||
|
||||
@@ -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--
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
<img src="importantLogo.jpeg" alt="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
|
||||
<img src="doingKarateWow.jpeg">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
|
||||
```
|
||||
@@ -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
|
||||
<label for="input1">Enter a date:</label>
|
||||
<input type="date" id="input1" name="input1">
|
||||
```
|
||||
|
||||
# --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
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
<input type="date" id="pickdate" name="date">
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -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
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #33FF33;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #003366;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
@@ -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
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 20%);
|
||||
background-color: hsl(120, 25%, 35%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 15%);
|
||||
background-color: hsl(120, 25%, 55%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@@ -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(/<a href=(''|"")>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>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. <a href="">Click here</a> for information about batteries</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>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 <a href="">information about batteries</a></p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@@ -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
|
||||
<audio id="meowClip" controls>
|
||||
<source src="audio/meow.mp3" type="audio/mpeg">
|
||||
<source src="audio/meow.ogg" type="audio/ogg">
|
||||
</audio>
|
||||
```
|
||||
|
||||
**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(/<audio.*>[\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
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
<audio controls>
|
||||
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
|
||||
</audio>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@@ -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
|
||||
<figure>
|
||||
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
|
||||
<br>
|
||||
<figcaption>
|
||||
Master Camper Cat demonstrates proper form of a roundhouse kick.
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
# --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(/<figure>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<figure>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -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
|
||||
<form>
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name">
|
||||
</form>
|
||||
```
|
||||
|
||||
# --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
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>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?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>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?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -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
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #D3D3D3;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #636363;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@@ -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*?<main>\s*?<\/main>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
<footer></footer>
|
||||
```
|
||||
@@ -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
|
||||
<img src="visualDecoration.jpeg" alt="">
|
||||
```
|
||||
|
||||
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
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
@@ -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:
|
||||
|
||||
<ul>
|
||||
<li><code>display: none;</code> oder <code>visibility: hidden;</code> verbergen Inhalte für jeden, einschließlich den Nutzern von Bildschirmleseprogrammen</li>
|
||||
<li>Nullwerte für Pixelgrößen; z. B. <code>width: 0px; height: 0px;</code> entfernt dieses Element aus dem Fluss deines Dokuments, d. h. Screenreader werden es ignorieren</li>
|
||||
</ul>
|
||||
|
||||
# --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
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: ;
|
||||
left: ;
|
||||
width: ;
|
||||
height: ;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -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
|
||||
<button accesskey="b">Important Button</button>
|
||||
```
|
||||
|
||||
# --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
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>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?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>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?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -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(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<div>© 2018 Camper Cat</div>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
@@ -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(/<header>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@@ -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(/<nav>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: Standardisiere Zeitangaben mit dem HTML5 datetime-Attribut
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||
forumTopicId: 301025
|
||||
dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Um mit dem Datumsthema fortzufahren, HTML5 führte auch das `time`-Element zusammen mit einem `datetime`-Attribut ein, um Zeiten zu standardisieren. Das `time`-Tag ist ein Inline-Element, das ein Datum oder eine Uhrzeit auf einer Webseite enthalten kann. Ein `datetime`-Attribut enthält dieses Datum in einem gültigen Format. Dies ist der Wert, auf den Assistenzgeräte zugreifen. Es hilft Verwirrungen zu vermeiden, indem es eine standardisierte Version einer Zeitangabe bereithält, auch wenn diese im Text informell oder umgangssprachlich ausgedrückt wurde.
|
||||
|
||||
Hier ist ein Beispiel:
|
||||
|
||||
```html
|
||||
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Die Ergebnisse der Mortal Kombat-Umfrage von Camper Cat sind da! Umschließe den Text `Thursday, September 15<sup>th</sup>` mit einem `time`-Tag und füge ein `datetime` Attribut mit dem Wert `2016-09-15` hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte ein `p`-Element enthalten, das den Text `Thank you to everyone for responding to Master Camper Cat's survey.` und ein `time`-Element enthält.
|
||||
|
||||
```js
|
||||
assert(timeElement);
|
||||
```
|
||||
|
||||
Deine hinzugefügten `time`-Tags sollten den Text `Thursday, September 15<sup>th</sup>` umschließen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
timeElement &&
|
||||
timeElement?.innerHTML?.trim() === 'Thursday, September 15<sup>th</sup>'
|
||||
);
|
||||
```
|
||||
|
||||
Dein hinzugefügtes `time`-Tag sollte ein `datetime`-Attribut haben, das nicht leer ist.
|
||||
|
||||
```js
|
||||
assert(datetimeAttr && datetimeAttr?.length);
|
||||
```
|
||||
|
||||
Dein hinzugefügtes `datetime`-Attribut sollte auf den Wert `2016-09-15` gesetzt werden.
|
||||
|
||||
```js
|
||||
assert(datetimeAttr === '2016-09-15');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
<script>
|
||||
const pElement = [...document.querySelectorAll("article > p")]
|
||||
.filter(x => x?.textContent?.includes("Thank you to everyone for responding to Master Camper Cat's survey."));
|
||||
const timeElement = pElement[0] ? pElement[0].querySelector("time") : null;
|
||||
const datetimeAttr = timeElement?.getAttribute("datetime");
|
||||
</script>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: Verwende Überschriften, um hierarchische Beziehungen von Inhalten darzustellen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
||||
forumTopicId: 301026
|
||||
dashedName: use-headings-to-show-hierarchical-relationships-of-content
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Überschriften-Tags (`h1` bis `h6`) sind fleißige Arbeitstiere, die dabei helfen, deinem Code Struktur zu verleihen und Inhalte zu kennzeichnen. Screenreader können so eingestellt werden, dass sie nur die Überschriften einer Seite vorlesen, damit der Benutzer eine Zusammenfassung erhält. Das heißt es wichtig ist, dass die Überschriften-Tags in deinem Mark-up semantische Bedeutung haben, sich aufeinander beziehen und nicht nur für Größenwerte verwendet werden.
|
||||
|
||||
*Semantische Bedeutung* heißt, dass der verwendete Tag auf den Inhalt und die Art der Information hinweist.
|
||||
|
||||
Wenn du einen Aufsatz mit einer Einleitung, einem Hauptteil und einem Fazit schreiben würdest, dann ergäbe es nicht viel Sinn, das Fazit als Teilabschnitt des Hauptteils zu gliedern. Das Fazit sollte ein eigener Abschnitt sein. In ähnlicher Weise sollen die Überschriften-Tags einer Webseite in der richtigen Reihenfolge sortiert werden und die hierarchischen Beziehungen des Inhalts widerspiegeln.
|
||||
|
||||
Überschriften mit demselben (oder höherem) Rang beginnen neue implizierte Abschnitte und Überschriften mit niedrigerem Rang beginnen neue Unterabschnitte.
|
||||
|
||||
Eine Seite mit einem `h2`-Element, gefolgt von mehreren Unterabschnitten, die mit `h4`-Elementen beschriftet sind, würde beispielsweise einen Benutzer eines Screenreaders verwirren. Mit sechs Möglichkeiten ist es verlockend, ein Tag zu wählen, weil es im Browser besser aussieht, aber du kannst CSS dazu benutzen, um die relative Größe zu bearbeiten.
|
||||
|
||||
Ein letzter Punkt dazu: Jede Seite sollte immer ein (und nur ein) `h1`-Element haben, welches das Hauptthema des Inhalts ist. Diese und die anderen Überschriften werden unter anderem von Suchmaschinen verwendet, um das Thema der Seite zu erkennen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat möchte eine Seite auf seiner Website, auf der es darum geht, wie man ein Ninja werden kann. Hilf ihm dabei, die Überschriften in Ordnung zu bringen, damit sein Mark-up dem Inhalt semantische Bedeutungen verleiht und zwischen den Teilabschnitten sinnvolle "Eltern-Kind-Beziehungen" bestehen. Weise alle `h5`-Tags dem richtigen Überschriftenlevel zu, um zu kennzeichnen, dass sie Teilabschnitte der `h2`-Tags sind. Benutze dafür `h3`-Tags.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte 6 `h3`-Tags enthalten.
|
||||
|
||||
```js
|
||||
assert($('h3').length === 6);
|
||||
```
|
||||
|
||||
Dein Code sollte 6 schließende `h3`-Tags haben.
|
||||
|
||||
```js
|
||||
assert((code.match(/\/h3/g) || []).length === 6);
|
||||
```
|
||||
|
||||
Dein Code sollte keine `h5`-Tags enthalten.
|
||||
|
||||
```js
|
||||
assert($('h5').length === 0);
|
||||
```
|
||||
|
||||
Dein Code sollte keine schließenden `h5`-Tags beinhalten.
|
||||
|
||||
```js
|
||||
assert(/\/h5/.test(code) === false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h5>How to Hide in Plain Sight</h5>
|
||||
<h5>How to Climb a Wall</h5>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h5>How to Strengthen your Body</h5>
|
||||
<h5>How to Fight like a Ninja</h5>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h5>How to Breathe Properly</h5>
|
||||
<h5>How to Simplify your Life</h5>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h3>How to Hide in Plain Sight</h3>
|
||||
<h3>How to Climb a Wall</h3>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h3>How to Strengthen your Body</h3>
|
||||
<h3>How to Fight like a Ninja</h3>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h3>How to Breathe Properly</h3>
|
||||
<h3>How to Simplify your Life</h3>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: Verwende tabindex, um den Tastaturfokus zu einem Element hinzuzufügen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||
forumTopicId: 301027
|
||||
dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Das HTML-Attribut `tabindex` hat drei verschiedene Funktionen in Bezug auf den Tastaturfokus eines Elements. Wenn es an einem Tag steht, zeigt es an, dass das Element fokussiert werden kann. Der Wert (eine Ganzzahl, die positiv, negativ oder Null ist) bestimmt das Verhalten.
|
||||
|
||||
Bestimmte Elemente, wie z. B. Links und Formularsteuerelemente, erhalten automatisch den Tastaturfokus, wenn ein Benutzer durch eine Seite blättert. Die Reihenfolge ist dieselbe, in der die Elemente im HTML-Quelltext stehen. Die gleiche Funktionalität kann man auch anderen Elementen wie `div`, `span` und `p` geben, indem man ihnen ein `tabindex="0"`-Attribut zuweist. Hier ist ein Beispiel:
|
||||
|
||||
```html
|
||||
<div tabindex="0">I need keyboard focus!</div>
|
||||
```
|
||||
|
||||
**Hinweis:** Ein negativer `tabindex`-Wert (typischerweise -1) zeigt an, dass ein Element fokussierbar, aber nicht über die Tastatur erreichbar ist. Diese Methode wird in der Regel verwendet, um den Fokus programmatisch auf den Inhalt zu legen (z. B. wenn ein `div` für ein Pop-up-Fenster aktiviert wird) und ist nicht Gegenstand dieser Aufgaben.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat hat eine neue Umfrage erstellt, um Informationen über seine Nutzer zu sammeln. Er weiß, dass Eingabefelder automatisch den Tastaturfokus erhalten, aber er möchte sicherstellen, dass seine Tastaturbenutzer bei den Anweisungen pausieren, während sie durch die Elemente navigieren. Füge ein `tabindex`-Attribut zum `p`-Tag hinzu und setze dessen Wert auf `0`. Bonus: Die Verwendung von `tabindex` ermöglicht auch, dass die CSS-Pseudoklasse `:focus` auf dem `p`-Tag wirkt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte ein `tabindex`-Attribut zum `p`-Tag hinzufügen, das die Formularanweisungen enthält.
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex'));
|
||||
```
|
||||
|
||||
Dein Code sollte das `tabindex`-Attribut am `p`-Tag auf den Wert 0 setzen.
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex') == '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: Verwende das tabindex-Attribut, um die Reihenfolge des Tastaturfokus für mehrere Elemente festzulegen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||
forumTopicId: 301028
|
||||
dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Das `tabindex`-Attribut legt die exakte Reihenfolge von Elementen für die Navigation per Tabulatortaste fest. Dies wird erreicht, indem der Wert des Attributs auf eine positive Zahl von 1 oder mehr gesetzt wird.
|
||||
|
||||
Das Setzen eines `tabindex="1"` lenkt den Tastaturfokus zuerst auf dieses Element. Anschließend rotiert er durch die Sequenz der angegebenen `tabindex`-Werte (2, 3 etc.), bevor er zu Elementen mit Standardwerten bzw. `tabindex="0"` wechselt.
|
||||
|
||||
Wenn die Reihenfolge der Tabulatornavigation auf diese Weise festgelegt wird, ist es wichtig zu beachten, dass die Standardreihenfolge überschrieben wird, welche der Reihenfolge im HTML-Quellcode entspricht. Dies kann Benutzer verwirren, die erwarten, dass sie von oben beginnend durch die Seite navigieren. Diese Technik kann unter bestimmten Umständen notwendig sein, aber im Hinblick auf die Barrierefreiheit sollte man dabei behutsam vorgehen.
|
||||
|
||||
Hier ist ein Beispiel:
|
||||
|
||||
```html
|
||||
<div tabindex="1">I get keyboard focus, and I get it first!</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<div tabindex="2">I get keyboard focus, and I get it second!</div>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat hat ein Suchfeld auf seiner Seite mit inspirierenden Zitaten, das er mit CSS in der oberen rechten Ecke positionieren möchte. Er möchte, dass die Formularsteuerelemente, d. h. das `input`-Element "search" (dt. "Suche") und das `input`-Element "submit" (dt. "absenden"), die ersten beiden in der Tab-Reihenfolge sind. Füge ein `tabindex`-Attribut mit Wert `1` zum `search` `input` hinzu und ein `tabindex`-Attribut mit Wert `2` zum `submit` `input`.
|
||||
|
||||
Es ist auch zu beachten, dass manche Browser einen mitten in der Tab-Reihenfolge platzieren, wenn ein Element angeklickt wird. Ein Element wurde zur Seite hinzugefügt, das sicherstellt, dass du immer am Anfang deiner Tab-Reihenfolge beginnst.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte ein `tabindex`-Attribut zum `search` `input`-Tag hinzufügen.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex'));
|
||||
```
|
||||
|
||||
Dein Code sollte ein `tabindex`-Attribut zum `submit` `input`-Tag hinzufügen.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex'));
|
||||
```
|
||||
|
||||
Dein Code sollte das `tabindex`-Attribut auf dem `search` `input`-Tag auf einen Wert von 1 setzen.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex') == '1');
|
||||
```
|
||||
|
||||
Dein Code sollte das `tabindex`-Attribut auf dem `submit` `input`-Tag auf einen Wert von 2 setzen.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div tabindex="1" class="overlay"></div>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input type="search" name="search" id="search">
|
||||
<input type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 8px;
|
||||
}
|
||||
.overlay {
|
||||
margin: -8px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div tabindex="1" class="overlay"></div>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input tabindex="1" type="search" name="search" id="search">
|
||||
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 8px;
|
||||
}
|
||||
.overlay {
|
||||
margin: -8px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: Umfasse Inhalte mit dem article-Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||
forumTopicId: 301029
|
||||
dashedName: wrap-content-in-the-article-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`article` ist eines der neuen HTML5-Elemente, die deinem Mark-up semantische Bedeutung verleihen. `article` ist ein Abschnittselement und wird verwendet, um eigenständige, in sich abgeschlossene Inhalte einzufassen. Das Tag funktioniert gut mit Blogeinträgen, Forumsbeiträgen oder Nachrichtenartikeln.
|
||||
|
||||
Wann genau Inhalte für sich alleine stehen können, lässt sich nicht pauschal beantworten, aber die folgenden einfachen Tests können dabei helfen. Würde der Inhalt noch Sinn ergeben, wenn man alle umgebenden Kontextinformationen entfernen würde? Ähnlich ausgedrückt - würde der Inhalt bestehen, wenn man ihn isoliert in über einen RSS-Feed verbreiten würde?
|
||||
|
||||
Beachte, dass Menschen, die assistive Technologien verwenden, auf organisiertes, semantisch aussagekräftiges Mark-up angewiesen sind, um deinen Inhalten gut folgen zu können.
|
||||
|
||||
**Tipp:** Das `section`-Element ist auch neu bei HTML5 und hat eine etwas andere semantische Bedeutung als `article`. Ein `article` ist für eigenständige Inhalte gedacht und eine `section` dient zur Gruppierung thematisch verwandter Inhalte. Man kann sie nach Bedarf ineinander verschachteln. Wenn zum Beispiel ein Buch der `article` ist, dann ist jedes Kapitel eine `section`. Wenn es keine Beziehung zwischen Gruppen von Inhalten gibt, kannst du ein `div` verwenden.
|
||||
|
||||
`<div>` - gruppiert Inhalte `<section>` - gruppiert verwandte Inhalte `<article>` - gruppiert unabhängigen, eigenständigen Inhalt
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat hat `article`-Tags verwendet, um die Beiträge auf seiner Blog-Seite zu kennzeichnen, aber er hat vergessen, sie auch für den oberen zu verwenden. Ändere das `div`-Tag in ein `article`-Tag.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte ein `article`-Tag enthalten.
|
||||
|
||||
```js
|
||||
assert($('article').length == 3);
|
||||
```
|
||||
|
||||
Dein Code sollte keine `div`-Tags beinhalten.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<div>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>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...</p>
|
||||
</div>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>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?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>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?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: Radiobuttons in ein fieldset-Element für bessere Zugänglichkeit einbetten
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
||||
forumTopicId: 301030
|
||||
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Das nächste Formular-Thema behandelt die Zugänglichkeit von Optionsfeldern. Jede Option erhält ein `label` mit einem `for`-Attribut, das an die `id` des entsprechenden Elements gebunden ist, wie in der letzten Aufgabe behandelt. Da Optionsfelder oft in einer Gruppe enthalten sind, aus der der Benutzer eines auswählen muss, gibt es eine Möglichkeit, semantisch zu zeigen, dass die Optionen Teil eines Sets sind.
|
||||
|
||||
Das `fieldset`-Tag umgibt die gesamte Gruppierung der Optionsfelder, um dies zu erreichen. Oft wird ein `legend`-Tag verwendet, um eine Beschreibung für die Gruppierung zu liefern, die Bildschirmleser für jede einzelne Option im `fieldset`-Element lesen.
|
||||
|
||||
Der `fieldset`-Wrapper und der `legend`-Tag sind nicht notwendig, wenn die Optionen selbsterklärend sind, wie z. B. eine Geschlechterauswahl. Die Verwendung eines `label` mit dem `for`-Attribut für jedes Optionsfeld ist ausreichend.
|
||||
|
||||
Hier ist ein Beispiel:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Choose one of these three items:</legend>
|
||||
<input id="one" type="radio" name="items" value="one">
|
||||
<label for="one">Choice One</label><br>
|
||||
<input id="two" type="radio" name="items" value="two">
|
||||
<label for="two">Choice Two</label><br>
|
||||
<input id="three" type="radio" name="items" value="three">
|
||||
<label for="three">Choice Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat möchte Informationen über den Ninja-Level seiner Benutzer erhalten, wenn sie sich für seine E-Mail-Liste anmelden. Er hat eine Reihe von Optionsfeldern hinzugefügt und aus unserer letzten Lektion gelernt, `label`-Tags mit `for`-Attributen für jede Option zu verwenden. Los Camper Cat! Allerdings braucht sein Code noch etwas Hilfe. Ändere das `div`-Tag, das die Optionsschaltflächen umgibt, in ein `fieldset`-Tag, und ändere das `p`-Tag darin in ein `legend`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte ein `fieldset`-Tag um das Radio-Button-Set haben.
|
||||
|
||||
```js
|
||||
assert($('fieldset').length == 1);
|
||||
```
|
||||
|
||||
Das `fieldset`-Element sollte ein schließendes Tag haben.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/fieldset>/g) &&
|
||||
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Dein Code sollte ein `legend`-Tag um den Text enthalten, das fragt, welche Ninja-Stufe ein Benutzer hat.
|
||||
|
||||
```js
|
||||
assert($('legend').length == 1);
|
||||
```
|
||||
|
||||
Dein Code sollte keine `div`-Tags enthalten.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Dein Code sollte nicht mehr länger ein `p`-Tag um den Text haben, das fragt, welche Ninja-Stufe ein Benutzer hat.
|
||||
|
||||
```js
|
||||
assert($('p').length == 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<p>What level ninja are you?</p>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>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?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>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...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>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?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abe
|
||||
title: Einen Schatten zu einem Karten-ähnlichen Element hinzufügen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZdUd'
|
||||
forumTopicId: 301031
|
||||
dashedName: add-a-box-shadow-to-a-card-like-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Eigenschaft `box-shadow` wendet einen oder mehrere Schatten auf ein Element an.
|
||||
|
||||
Die `box-shadow` Eigenschaft nimmt Werte in folgender Reihenfolge an:
|
||||
|
||||
<ul>
|
||||
<li><code>offset-x</code> (wie weit der Schatten in horizontaler Richtung vom Element verschoben werden kann)</li>
|
||||
<li><code>offset-y</code> (wie weit der Schatten in vertikaler Richtung vom Element verschoben werden kann)</li>
|
||||
<li><code>blur-radius</code></li>
|
||||
<li><code>spread-radius</code></li>
|
||||
<li><code>color</code></li>
|
||||
</ul>
|
||||
|
||||
Der `blur-radius` und `spread-radius` sind optional.
|
||||
|
||||
Mehrere Box-Schatten können erzeugt werden, wenn die Eigenschaften jedes `box-shadow`-Elements mit Kommas getrennt sind.
|
||||
|
||||
Hier ist ein Beispiel, um mit CSS mehrere Schatten mit etwas Unschärfe bei größtenteils transparenten schwarzen Farben zu erzeugen:
|
||||
|
||||
```css
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Das Element hat jetzt die Id `thumbnail`. Benutze jetzt diesen Selektor und die Beispielwerte für CSS von oben, um einen `box-shadow` auf der Karte zu platzieren.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte eine `box-shadow`-Eigenschaft zur `thumbnail`-Id hinzufügen.
|
||||
|
||||
```js
|
||||
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||
```
|
||||
|
||||
Du solltest die angegebenen CSS-Werte für den `box-shadow` verwenden.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: Die Hintergrundfarbe eines Textes anpassen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||
forumTopicId: 301032
|
||||
dashedName: adjust-the-background-color-property-of-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Statt den gesamten Hintergrund oder die Farbe des Textes anzupassen, um den Vordergrund gut lesbar zu machen, kannst du mit der `background-color`-Eigenschaft dem entsprechenden Element eine Hintergrundfarbe hinzufügen, um den Text hervorzuheben. Diese Aufgabe verwendet `rgba()`- statt `hex`-Codes oder normalem `rgb()`.
|
||||
|
||||
<blockquote>rgba steht für:<br>r = rot<br>g = grün<br>b = blau<br>a = Alpha/Deckkraft</blockquote>
|
||||
|
||||
Die RGB-Werte können zwischen 0 und 255 liegen. Der Alphawert kann zwischen 1 und 0 liegen, wobei 1 für voll deckend und 0 für völlig transparent steht. `rgba()` eignet sich für diesen Fall gut, da es dir erlaubt, die Deckkraft anzupassen. Das bedeutet, dass du den Hintergrund nicht komplett überdecken musst.
|
||||
|
||||
Für diese Aufgabe verwendest du `background-color: rgba(45, 45, 45, 0.1)`. Es erzeugt eine dunkelgraue Farbe, die aufgrund der geringen Deckkraft von 0.1 fast transparent ist.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Um den Text mehr hervorzuheben, passe die `background-color` des `h4`-Elements an den angegebenen `rgba()`-Wert an.
|
||||
|
||||
Entferne ebenfalls bei dem `h4`-Element die `height`-Eigenschaft und füge ein `padding` von 10px hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte dem `h4`-Element die Eigenschaft `background-color` mit den Werten `rgba(45, 45, 45, 0.1)` hinzufügen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
|
||||
code.replace(/\s/g, '')
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Dein Code sollte dem `h4`-Element die Eigenschaft `padding` mit einem Wert von 10px hinzufügen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4').css('padding-top') == '10px' &&
|
||||
$('h4').css('padding-right') == '10px' &&
|
||||
$('h4').css('padding-bottom') == '10px' &&
|
||||
$('h4').css('padding-left') == '10px'
|
||||
);
|
||||
```
|
||||
|
||||
Die `height`-Eigenschaft des `h4`-Elements sollte entfernt werden.
|
||||
|
||||
```js
|
||||
assert(!($('h4').css('height') == '25px'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: Anpassen der Farbe verschiedener Elemente an deren Komplementärfarben
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||
forumTopicId: 301033
|
||||
dashedName: adjust-the-color-of-various-elements-to-complementary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Komplementärfarben-Aufgabe zeigte, dass auf dem Farbkreis gegenüberliegende Farben, nebeneinander platziert, kräftiger wirken können. Jedoch kann der starke visuelle Kontrast anstrengend sein, wenn er auf einer Website übermäßig verwendet wird und Text auf einem komplementärfarbenen Hintergrund kann ev. schwerer lesbar sein. In der Regel ist eine der Farben dominant und die Komplementärfarbe wird verwendet, um die Aufmerksamkeit auf bestimmte Seiteninhalte zu lenken.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Diese Seite wird ein Blaugrün (`#09A7A1`) als dominante Farbe verwenden und das komplementäre Orange (`#FF790E`), um den "Sign-up"-Button (dt. Registrierungsbutton) visuell hervorzuheben. Ändere die `background-color` der `header` und `footer` von Schwarz auf Blaugrün. Ändere dann ebenfalls die Textfarbe von `h2` mit der `color`-Eigenschaft in Blaugrün. Zum Schluss ändere die `background-color` des `button` in Orange.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `header`-Element sollte eine `background-color` von #09A7A1 haben.
|
||||
|
||||
```js
|
||||
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
Das `footer`-Element sollte eine `background-color` von #09A7A1 haben.
|
||||
|
||||
```js
|
||||
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
Das `h2`-Element sollte eine `color` von #09A7A1 haben.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
Das `button`-Element sollte eine `background-color` von #FF790E haben.
|
||||
|
||||
```js
|
||||
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
button {
|
||||
background-color: white;
|
||||
}
|
||||
footer {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: #09A7A1;
|
||||
}
|
||||
button {
|
||||
background-color: #FF790E;
|
||||
}
|
||||
footer {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: Die Höhe eines Elements mithilfe der height-Eigenschaft anpassen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||
forumTopicId: 301034
|
||||
dashedName: adjust-the-height-of-an-element-using-the-height-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Du kannst die Höhe eines Elements in CSS mit der `height`-Eigenschaft festlegen, ähnlich der `width`-Eigenschaft (dt. Breite). Hier ist ein Beispiel, welches die Höhe eines Bildes in 20px ändert:
|
||||
|
||||
```css
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Füge eine `height`-Eigenschaft zu dem `h4`-Tag hinzu und setze es auf 25px.
|
||||
|
||||
**Hinweis:** Dein Zoom muss möglicherweise auf 100 % eingestellt sein, damit du diese Aufgabe bestehen kannst.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte die `height`-Eigenschaft des `h4`-Elements auf 25px setzen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
|
||||
25 &&
|
||||
/h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: Den Hover-Status eines Anchor-Tags anpassen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||
forumTopicId: 301035
|
||||
dashedName: adjust-the-hover-state-of-an-anchor-tag
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Diese Aufgabe wird die Verwendung von Pseudo-Klassen vorstellen. Eine Pseudo-Klasse ist ein Schlüsselwort, welches man einem Selektor hinzufügen kann, um einen bestimmten Zustand des Elements auszuwählen.
|
||||
|
||||
Zum Beispiel kann das Styling für den Hover-Status eines Anchor-Tags mit dem Pseudoklassen-Selektor `:hover` geändert werden. Hier ist der CSS-Code um die `color` des Anker-Tags während des Hover-Statuses auf Rot zu ändern:
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Der Texteditor enthält eine CSS-Regel, um alle `a`-Tags schwarz zu stylen. Füge eine Regel hinzu, damit die `color` Blau ist, wenn der Benutzer über das `a`-Tag fährt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die Anchor-Tag-`color` sollte Schwarz bleiben, füge nur CSS-Regeln für den `:hover`-Status hinzu.
|
||||
|
||||
```js
|
||||
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Das Anchor-Tag sollte die `color` Blau haben, wenn man darüber fährt.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
a:hover {
|
||||
color: rgba(0,0,255,1);
|
||||
}
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: Einen Farbton anpassen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||
forumTopicId: 301036
|
||||
dashedName: adjust-the-hue-of-a-color
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Farben haben verschiedene Eigenschaften wie Farbton, Sättigung und Helligkeit. Mit CSS3 wurde die Funktion `hsl()` als alternative Möglichkeit zur Auswahl einer Farbe eingeführt, indem diese Merkmale direkt angegeben werden.
|
||||
|
||||
**Hue** (dt. Farbton) ist das, was wir im Allgemeinen als "Farbe" bezeichnen. Wenn du dir ein Farbspektrum vorstellst, das auf der linken Seite rot beginnt, dann in der Mitte grün ist und blau auf der rechten Seite, dann beschreibt der Farbton, wo eine Farbe entlang dieser Linie platziert ist. In `hsl()` wird ein Farbkreis-Modell statt einem linearen Spektrum verwendet, wobei der Winkel des Farbtons auf diesem Kreis einem Wert zwischen 0 und 360 entspricht.
|
||||
|
||||
**Saturation** (dt. Sättigung) ist der Anteil von Grau in einer Farbe. Eine vollständig gesättigte Farbe enthält gar kein Grau und eine minimal gesättigte Farbe besteht fast nur aus Grau. Dieser Wert wird als Prozentsatz angegeben. Dabei entspricht 100 % einer vollständigen Sättigung.
|
||||
|
||||
**Lightness** (dt. Helligkeit) beschreibt den Anteil von Weiß oder Schwarz in einer Farbe. Dies wird ebenfalls als Prozentsatz zwischen 0 % (schwarz) und 100 % (weiß) ausgedrückt, wobei 50 % der normalen Farbe entspricht.
|
||||
|
||||
Hier sind einige Beispiele für die Verwendung von `hsl()` mit vollständig gesättigten Farben bei mittlerer Helligkeit:
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Farbe</th><th>HSL</th></tr></thead><tbody><tr><td>rot</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>gelb</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>grün</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>cyan</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>blau</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ändere die `background-color` für jedes `div`-Element, basierend auf den Klassennamen (`green`, `cyan`, oder `blue`) mit `hsl()`. Alle drei sollten volle Sättigung und eine normale Helligkeit haben.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte die `hsl()` Funktion verwenden, um die Farbe Grün zu deklarieren.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Dein Code sollte die `hsl()` Funktion verwenden, um die Farbe Cyan zu deklarieren.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Dein Code sollte die `hsl()` Funktion verwenden, um die Farbe Blau zu deklarieren.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Das `div`-Element mit der Klasse `green` sollte eine `background-color` von Grün haben.
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
Das `div`-Element mit der Klasse `cyan` sollte eine `background-color` von Cyan haben.
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
Das `div`-Element mit der Klasse `blue` sollte eine `background-color` von Blau haben.
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: hsl(120, 100%, 50%);
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: hsl(180, 100%, 50%);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: Passe die Größe einer Überschrift an vs. die eines Absatzes
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||
forumTopicId: 301037
|
||||
dashedName: adjust-the-size-of-a-heading-element-versus-a-paragraph-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Schriftgröße von Überschriftelementen (`h1` bis `h6`) sollte im Allgemeinen größer sein als die Schriftgröße von Absatz-Tags. Dadurch wird es für den Benutzer einfacher, das Layout visuell nachzuvollziehen und die Wichtigkeit der einzelnen Elemente auf der Seite zu verstehen. Verwende die Eigenschaft `font-size`, um die Größe des Textes in einem Element anzupassen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Um die Überschrift deutlich größer als den Absatz zu machen, ändere die `font-size` des Elements `h4` auf 27 Pixel.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte dem `h4` Element, das auf 27 Pixel gesetzt ist, die Eigenschaft `font-size` geben.
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '27px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: Die Sättigung und Helligkeit einer Farbe anpassen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||
forumTopicId: 301038
|
||||
dashedName: adjust-the-tone-of-a-color
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die `hsl()`-Option in CSS macht es einfach, den Ton einer Farbe anzupassen. Das Mischen von Weiß mit einem reinen Farbton erzeugt einen helleren Ton dieser Farbe, und das Hinzufügen von Schwarz erzeugt einen dunkleren Ton. Alternativ kann ein Ton durch das Hinzufügen von Grau, oder durch Aufhellen bzw. Abdunkeln erzeugt werden. Wie bereits erwähnt, stehen die Buchstaben "s" und "l" in `hsl()` für "saturation" (dt. Sättigung) und "lightness" (dt. Helligkeit). Der Prozentsatz der Sättigung ändert den Grauanteil und der Prozentsatz der Helligkeit, wie viel Weiß oder Schwarz in der Farbe enthalten ist. Dies ist nützlich, wenn du einen Grundton hast, der dir gefällt, aber verschiedene Variationen davon benötigst.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Alle Elemente haben eine Standardfarbe `background-color` von `transparent`. Unser `nav`-Element scheint derzeit eine Hintergrundfarbe von `cyan` zu haben, weil das Element dahinter eine `background-color` von `cyan` hat. Füge eine `background-color` zu dem `nav`-Element hinzu, sodass es den gleichen `cyan`-Ton hat, allerdings mit `80%` Sättigung und `25%` Helligkeit, um es alternativ abzutönen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `nav`-Element sollte eine `background-color` des angepassten Cyantons haben, wobei die Eigenschaft `hsl()` verwendet wird.
|
||||
|
||||
```js
|
||||
// Computed style of hsl(180, 80%, 25%) results in rgb(13,115,115)
|
||||
assert.equal(
|
||||
new __helpers.CSSHelp(document).getStyle('nav').getPropVal('background-color', true),
|
||||
'rgb(13,115,115)'
|
||||
)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: hsl(180, 80%, 25%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: Die Breite eines Elements mithilfe der width-Eigenschaft anpassen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||
forumTopicId: 301039
|
||||
dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Man kann die Breite eines Elements in CSS mit der `width`-Eigenschaft festlegen. Werte können in relativen Längeneinheiten (z. B. `em`), absoluten Längeneinheiten (z. B. `px`) oder als Prozentsatz seines übergeordneten Elements angegeben werden. Hier ein Beispiel, in dem die Breite eines Bildes auf 220px geändert wird:
|
||||
|
||||
```css
|
||||
img {
|
||||
width: 220px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Füge der Karte eine `width`-Eigenschaft hinzu und setzte den Wert der Gesamtbreite auf 245px. Verwende die `fullCard` (dt. ganze Karte) Klasse, um das Element auszuwählen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte die `width`-Eigenschaft der Karte auf 245px ändern, indem du den `fullCard`-Klassenselektor verwendest.
|
||||
|
||||
```js
|
||||
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||
assert(
|
||||
fullCard &&
|
||||
/width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
|
||||
$('.fullCard').css('maxWidth') === 'none'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: Elemente mit variablen Geschwindigkeiten animieren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||
forumTopicId: 301040
|
||||
dashedName: animate-elements-at-variable-rates
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Es gibt eine Vielzahl von Möglichkeiten, die Geschwindigkeit von ähnlich animierten Elementen zu variieren. Bisher wurde dies durch die Verwendung der Eigenschaft `animation-iteration-count` (dt. Anzahl der Animationsdurchläufe) und das Setzen von `@keyframes`-Regeln (dt. Schlüsselbilder) erreicht.
|
||||
|
||||
Als Beispiel dient uns die Animation auf der rechten Seite, welche aus zwei Sternen besteht, welche je bei der 20 %-Marke in der `@keyframes`-Regel kleiner und transparent werden und die Funkel-Animation erzeugen. Du kannst die `@keyframes`-Regel für eines der Elemente ändern, sodass die Sterne mit unterschiedlicher Geschwindigkeit funkeln.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ändere die Animationsgeschwindigkeit für das Element mit dem Klassennamen `star-1`, indem du die `@keyframes`-Regel auf 50 % änderst.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die `@keyframes`-Regel der `star-1`-Klasse sollte bei 50 % liegen.
|
||||
|
||||
```js
|
||||
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
50% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: Elemente mithilfe einer unendlichen Anzahl von Animationsdurchläufen ununterbrochen animieren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||
forumTopicId: 301041
|
||||
dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die vorherigen Aufgaben beschäftigten sich mit der Verwendung einiger Animationseigenschaften und `@keyframes`-Regeln. Eine weitere Animationseigenschaft ist `animation-iteration-count`, mit der man die Anzahl von Animationsdurchläufen festlegen kann. Hier ist ein Beispiel:
|
||||
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
In diesem Fall stoppt die Animation nach drei Durchläufen, aber es ist möglich, die Animation kontinuierlich laufen zu lassen, indem der Wert auf `infinite` (dt. unendlich) gesetzt wird.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Um den Ball auf der rechten Seite ununterbrochen springen zu lassen, ändere die `animation-iteration-count`-Eigenschaft auf `infinite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die Eigenschaft `animation-iteration-count` sollte einen Wert von `infinite` haben.
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 3;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
@@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: Mehrere Elemente mit unterschiedlicher Geschwindigkeit animieren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||
forumTopicId: 301042
|
||||
dashedName: animate-multiple-elements-at-variable-rates
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In der vorherigen Aufgabe hast du die Geschwindigkeit zweier ähnlich animierter Elemente verändert, indem du deren `@keyframes`-Regel abgeändert hast. Du kannst denselben Effekt erzielen, indem du mehreren Elementen via `animation-duration` eine unterschiedliche Animationsdauer zuweist.
|
||||
|
||||
In der im Texteditor laufenden Animation funkeln drei Sterne synchron in einer Endlosschleife. Um sie mit unterschiedlicher Geschwindigkeit funkeln zu lassen, kannst du die `animation-duration`-Eigenschaft je auf andere Werte setzen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Setze die `animation-duration` der Elemente mit den Klassen `star-1`, `star-2` und `star-3` auf 1s, 0.9s, und 1.1s.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die `animation-duration`-Eigenschaft für den Stern mit der Klasse `star-1` sollte weiterhin 1s betragen.
|
||||
|
||||
```js
|
||||
assert($('.star-1').css('animation-duration') == '1s');
|
||||
```
|
||||
|
||||
Die `animation-duration`-Eigenschaft für den Stern mit Klasse `star-2` sollte 0.9s betragen.
|
||||
|
||||
```js
|
||||
assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
```
|
||||
|
||||
Die `animation-duration`-Eigenschaft für den Stern mit Klasse `star-3` sollte 1.1s betragen.
|
||||
|
||||
```js
|
||||
assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 0.9s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1.1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: Ein Element mithilfe der Margin-Eigenschaft horizontal zentrieren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||
forumTopicId: 301043
|
||||
dashedName: center-an-element-horizontally-using-the-margin-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Eine weitere Positionierungstechnik ist es, ein Block-Element horizontal zu zentrieren. Beispielsweise, in dem man seine `margin` auf einen Wert 'auto' setzt.
|
||||
|
||||
Diese Methode funktioniert auch für Bilder. Sie sind standardmäßig Inline-Elemente, die in Block-Elemente geändert werden können, indem man die `display`-Eigenschaft auf `block` setzt.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Zentriere das `div` auf dieser Seite, indem du eine `margin`-Eigenschaft mit einem Wert von `auto` hinzufügst.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `div` sollte eine `margin` mit einem Wert von `auto` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div')?.margin === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512ac9
|
||||
title: Die relative Position eines Elements ändern
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVmMtZ'
|
||||
forumTopicId: 301044
|
||||
dashedName: change-an-elements-relative-position
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS behandelt jedes HTML-Element als eigene Box, was man als <dfn>CSS Box Model</dfn> bezeichnet. Block-Level-Elemente beginnen automatisch in einer neuen Zeile (z. B. Überschriften, Absätze und Div-Elemente), während sich Inline-Elemente zwischen anderen Inhalten derselben Zeile befinden (z. B. Bilder oder Spans). Das Standardlayout von Elementen dieser Art wird als <dfn>normal flow</dfn> (dt. "normaler Fluss") eines Dokuments bezeichnet, wobei CSS auch die position-Eigenschaft bereithält, um diesen zu überschreiben.
|
||||
|
||||
Wenn die Position eines Elements auf `relative` gesetzt ist, kannst du angeben, wie CSS es *relativ* zu seiner aktuellen Position im normalen Fluss der Seite verschieben soll. Das funktioniert gemeinsam mit den CSS-Offset-Eigenschaften `left` oder `right` bzw. `top` oder `bottom`. Diese geben an, um wie viele Pixel, Prozent oder Ems das Element von seiner normalen Position *versetzt* werden soll. Im folgenden Beispiel wird der Absatz um 10 Pixel vom unteren Rand entfernt:
|
||||
|
||||
```css
|
||||
p {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
Wenn du die Position eines Elements auf relativ änderst, wird es nicht aus dem normalen Fluss entfernt und andere Elemente in der Umgebung verhalten sich weiterhin so, als befände sich dieses Element in seiner Standardposition.
|
||||
|
||||
**Hinweis:** Die Positionierung gibt dir eine Menge Flexibilität und Kontrolle über das visuelle Layout einer Seite. Es ist gut, sich daran zu erinnern, dass unabhängig von der Position der Elemente das zugrunde liegende HTML-Markup sinnvoll organisiert sein sollte, wenn es von oben nach unten gelesen wird. So können Benutzer mit Sehbehinderungen, die auf Hilfsmittel wie Screenreader angewiesen sind, auf deine Inhalte zugreifen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ändere die `position` des `h2` auf `relative` und verwende einen CSS-Offset, um es um 15 Pixel von der Position `top` zu verschieben, an der es sich im normalen Fluss befindet. Beachte, dass es keine Auswirkungen auf die Positionen der umgebenden h1- und p-Elemente gibt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `h2`-Element sollte eine `position`-Eigenschaft haben, die auf `relative` gesetzt ist.
|
||||
|
||||
```js
|
||||
assert($('h2').css('position') == 'relative');
|
||||
```
|
||||
|
||||
Dein Code sollte einen CSS-Offset verwenden, um das `h2` 15px relativ von `top` zu positionieren, wo es normalerweise sitzt.
|
||||
|
||||
```js
|
||||
assert($('h2').css('top') == '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae7
|
||||
title: Das Timing von Animationen mit Schlüsselwörtern ändern
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKvwCM'
|
||||
forumTopicId: 301045
|
||||
dashedName: change-animation-timing-with-keywords
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In CSS-Animationen steuert die Eigenschaft `animation-timing-function` wie schnell sich ein animiertes Element über die Dauer der Animation ändert. Wenn die Animation ein Auto ist, das sich von Punkt A nach Punkt B in einer bestimmten Zeit bewegt (die `animation-duration`), beschreibt die `animation-timing-function`, wie das Auto während des Fahrens beschleunigt und verlangsamt.
|
||||
|
||||
Es gibt eine Reihe vordefinierter Schlüsselwörter für beliebte Optionen. Der Standardwert `ease` zum Beispiel beginnt langsam, beschleunigt sich in der Mitte und verlangsamt sich am Ende wieder. Weitere Optionen sind `ease-out`, welche am Anfang schnell ist und sich dann verlangsamt, `ease-in`, welche am Anfang langsam ist und sich am Ende beschleunigt oder `linear`, welche eine konstante Animationsgeschwindigkeit im gesamten Programm anwendet.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Füge für die Elemente mit einer Id von `ball1` und `ball2`, jeweils eine Eigenschaft `animation-timing-function` hinzu und setze `#ball1` auf `linear` und `#ball2` auf `ease-out`. Beachte den Unterschied zwischen der Bewegung der Elemente während der Animationen und dass die beiden zusammen enden, da sie die gleiche `animation-duration` von 2 Sekunden haben.
|
||||
|
||||
# --hints--
|
||||
|
||||
Der Wert der Eigenschaft `animation-timing-function` für das Element mit der Id `ball1` sollte `linear` sein.
|
||||
|
||||
```js
|
||||
const ball1Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball1').css('animation-timing-function')
|
||||
);
|
||||
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
```
|
||||
|
||||
Der Wert der Eigenschaft `animation-timing-function` für das Element mit der Id `ball2` sollte `ease-out` sein.
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512acf
|
||||
title: Ändern der Position von überlappenden Elementen mit der Eigenschaft z-index
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM94aHk'
|
||||
forumTopicId: 301046
|
||||
dashedName: change-the-position-of-overlapping-elements-with-the-z-index-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Wenn Elemente so positioniert werden, dass sie sich überlappen (d. h. mit `position: absolute | relative | fixed | sticky`), erscheint das Element, das im HTML-Markup später kommt, standardmäßig über den anderen Elementen. Mit der Eigenschaft `z-index` kann jedoch die Reihenfolge festgelegt werden, in der die Elemente übereinander gestapelt werden. Er muss eine Integerzahl sein (d. h. eine ganze Zahl und keine Dezimalzahl). Höhere Werte für die `z-index`-Eigenschaft eines Elements verschieben es im Stapel höher als solche mit niedrigeren Werten.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Füge dem Element mit dem Klassennamen `first` (das rote Rechteck) eine Eigenschaft `z-index` hinzu und setze sie auf den Wert 2, damit sie das andere Element (blaues Rechteck) überdeckt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das Element mit der Klasse `first` sollte einen `z-index`-Wert von 2 besitzen.
|
||||
|
||||
```js
|
||||
assert($('.first').css('z-index') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad6
|
||||
title: Erstellen eines linearen CSS-Farbverlaufs
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4dpt9'
|
||||
forumTopicId: 301047
|
||||
dashedName: create-a-gradual-css-linear-gradient
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Das Anwenden einer Farbe auf HTML-Elemente ist nicht auf einen einheitlichen Farbton beschränkt. CSS bietet die Möglichkeit, Farbübergänge, auch bekannt als Farbverläufe, auf Elementen anzuwenden. Darauf wird über die Funktion `linear-gradient()` der Eigenschaft `background` zugegriffen. Hier ist die allgemeine Syntax:
|
||||
|
||||
```css
|
||||
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||
```
|
||||
|
||||
Das erste Argument gibt die Richtung an, von der der Farbübergang ausgeht. Sie kann in Grad angegeben werden, wobei `90deg` einen horizontalen Farbverlauf (von links nach rechts) und `45deg` einen diagonalen Farbverlauf (von links unten nach rechts oben) ergibt. Die folgenden Argumente geben die Reihenfolge der Farben an, die im Farbverlauf verwendet werden.
|
||||
|
||||
Beispiel:
|
||||
|
||||
```css
|
||||
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Verwende für den `background` des `div`-Elements einen `linear-gradient()` und stelle ihn aus einer Richtung von 35 Grad, mit einer Farbänderung von `#CCFFFF` auf `#FFCCCC` ein.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `div`-Element sollte einen `linear-gradient` `background` mit der angegebenen Richtung bzw. den Farben haben.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div')
|
||||
.css('background-image')
|
||||
.match(
|
||||
/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512add
|
||||
title: Erstelle eine Grafik mit CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDWPs6'
|
||||
forumTopicId: 301048
|
||||
dashedName: create-a-graphic-using-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Durch die Bearbeitung verschiedener Selektoren und Eigenschaften kannst du interessante Formen erzeugen. Eine der Einfacheren ist eine Mondsichelform. Für diese Aufgabe musst du mit der Eigenschaft `box-shadow` arbeiten, die den Schatten eines Elements festlegt, zusammen mit der Eigenschaft `border-radius`, die die Rundheit der Ecken steuert.
|
||||
|
||||
Du erstellst ein rundes, transparentes Objekt mit einem scharfen Schatten, der leicht zur Seite versetzt ist. Der Schatten wird die tatsächliche Mondform ergeben, die du siehst.
|
||||
|
||||
Um ein rundes Objekt zu erzeugen, sollte die Eigenschaft `border-radius` auf einen Wert von 50 % gesetzt werden.
|
||||
|
||||
Vielleicht erinnerst du dich aus einer früheren Aufgabe daran, dass die `box-shadow` Eigenschaft Werte in folgender Reihenfolge `offset-x`, `offset-y`, `blur-radius`, `spread-radius` und `color` annehmen kann. Die Werte `blur-radius` und `spread-radius` sind optional.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Verändere das quadratische Element im Editor, um die Mondform zu erzeugen. Ändere zunächst die `background-color` auf `transparent` und setze dann die Eigenschaft `border-radius` auf 50 %, um die Kreisform zu erzeugen. Anschließend änderst du noch die `box-shadow` Eigenschaft und setzt `offset-x` auf 25px, `offset-y` auf 10px, `blur-radius` auf 0, `spread-radius` auf 0, und `color` auf `blue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Der Wert der Eigenschaft `background-color` sollte auf `transparent` gesetzt werden.
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
```
|
||||
|
||||
Der Wert der Eigenschaft `border-radius` sollte auf `50%` gesetzt werden.
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
Der Wert der `box-shadow` Eigenschaft sollte 25px für `offset-x`, 10px für `offset-y`, 0 für `blur-radius`, 0 für `spread-radius`, und schließlich `blue` für `color` betragen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
border-radius: 0px;
|
||||
box-shadow: 25px 10px 10px 10px green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
box-shadow: 25px 10px 0 0 blue;
|
||||
}
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: Erstellen einer horizontalen Linie mithilfe des hr-Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bR8t7'
|
||||
forumTopicId: 301049
|
||||
dashedName: create-a-horizontal-line-using-the-hr-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Du kannst das `hr`-Tag verwenden, um eine horizontale Linie über die Breite des umgebenden Elements hinzuzufügen. Dies kann verwendet werden, um einen Themenwechsel zu kennzeichnen, oder um Gruppen von Inhalten visuell zu trennen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Füge ein `hr`-Tag unterhalb des `h4` ein, welches den Kartentitel enthält.
|
||||
|
||||
**Hinweis:** In HTML ist `hr` ein selbstschließendes Tag und benötigt daher kein separates schließendes Tag.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte ein `hr`-Tag in das Markup einfügen.
|
||||
|
||||
```js
|
||||
assert($('hr').length == 1);
|
||||
```
|
||||
|
||||
Der `hr`-Tag sollte zwischen dem Titel und dem Absatz stehen.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512ade
|
||||
title: Eine komplexere Form mit CSS und HTML erstellen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpz4fr'
|
||||
forumTopicId: 301050
|
||||
dashedName: create-a-more-complex-shape-using-css-and-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Herzform ist eine der beliebtesten der Welt – und in dieser Aufgabe wirst du eine ausschließlich mit CSS erstellen. Aber davor musst du die `::before` und `::after` Pseudoelemente kennenlernen. `::before` erstellt ein Pseudo-Element, das das erste Kind des ausgewählten Elements ist; `::after` erzeugt ein Pseudo-Element, das das letzte Kind des ausgewählten Elements ist. Im folgenden Beispiel wird ein `::before`-Pseudoelement verwendet, um ein Rechteck zu einem Element mit der Klasse `heart` hinzuzufügen:
|
||||
|
||||
```css
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: yellow;
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 70px;
|
||||
top: -50px;
|
||||
left: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
Die `::before` und `::after` Pseudoelemente funktionieren nur dann richtig, wenn sie eine definierte `content`-Eigenschaft haben. Diese Eigenschaft wird normalerweise verwendet, um dem ausgewählten Element Dinge wie ein Foto oder Text hinzuzufügen. Wenn die Pseudoelemente `::before` und `::after` benutzt werden, um Formen zu schaffen, ist die Eigenschaft `content` erforderlich, allerdings wird sie auf einen leeren String gesetzt. Im obigen Beispiel hat das Element mit der Klasse `heart` ein `::before`-Pseudoelement, das ein gelbes Rechteck mit einer Höhe von `50px` und einer Breite von `70px` erzeugt. Dieses Rechteck hat aufgrund seines 25% `border-radius` abgerundete Ecken und ist absolut `5px` links und `50px` oberhalb des Elements positioniert.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Transformiere das Element auf dem Bildschirm in ein Herz. Ändere im `.heart::after` Selektor, die `background-color` zu `pink` und den `border-radius` auf 50%.
|
||||
|
||||
Verweise als Nächstes mit der `heart` Klasse auf das Element (nur `heart`) und definiere die `transform`-Eigenschaft. Verwende die `rotate()`-Funktion mit -45 Grad.
|
||||
|
||||
Ändere schließlich im `.heart::before` Selektor, dessen `content` Eigenschaft zu einem leeren String.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die `background-color` Eigenschaft des `.heart::after` Selektors sollte `pink` sein.
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
assert(
|
||||
/({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter)
|
||||
);
|
||||
```
|
||||
|
||||
Der `border-radius` des `.heart::after` Selektors sollte 50% betragen.
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
```
|
||||
|
||||
Die `transform`-Eigenschaft für die Klasse `heart` sollte eine `rotate()`-Funktion mit -45 Grad enthalten.
|
||||
|
||||
```js
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
Der `content` des `.heart::before` Selektors sollte ein leerer String sein.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: ;
|
||||
}
|
||||
.heart::after {
|
||||
background-color: blue;
|
||||
content: "";
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: ;
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.heart::after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: Bewegung mittels CSS-Animation kreieren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||
forumTopicId: 301051
|
||||
dashedName: create-movement-using-css-animation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Wenn Elemente eine spezifizierte `position` haben, z. B. fest als `fixed`, oder relativ als `relative`, können die CSS-Offset-Eigenschaften rechts als `right`, links als `left`, oben als `top` und unten als `bottom` in Animationsregeln verwendet werden, um Bewegungen zu schaffen.
|
||||
|
||||
Wie im Beispiel unten gezeigt, kannst du das Element nach oben schieben, indem du die `top`-Eigenschaft des `50%`-Keyframes auf 50px setzt, aber auf 0px für den ersten (`0%`) und den letzten (`100%`)-Keyframe lässt.
|
||||
|
||||
```css
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Füge der Animation des `div` eine horizontale Bewegung hinzu. Verwende die `left`-Offset-Eigenschaft, in der `@keyframes`-Regel, sodass der Regenbogen mit 0px bei `0%` beginnt, sich zu 25px bei `50%` und schließlich zu -25px bei `100%` bewegt. Ersetze nicht die `top`-Eigenschaft im Editor. Die Animation sollte sowohl vertikale als auch horizontale Bewegungen haben.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die `@keyframes`-Regel für `0%` sollte den `left`-Offset von 0px verwenden.
|
||||
|
||||
```js
|
||||
assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
Die `@keyframes`-Regel für `50%` sollte den `left`-Offset von 25px verwenden.
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
Die `@keyframes`-Regel für `100%` sollte den `left`-Offset von -25px verwenden.
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
left: 25px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
left: -25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad8
|
||||
title: Durch Hinzufügen eines subtilen Hintergrundmusters eine Textur erstellen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQdwJC8'
|
||||
forumTopicId: 301052
|
||||
dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Man kann einen Hintergrund interessanter und ansehnlicher machen, indem man ihm ein subtiles Muster hinzufügt und damit eine Textur erzeugt. Der Schlüssel liegt natürlich in der Balance, damit er nicht zu prominent wird und vom Vordergrund ablenkt. Die Eigenschaft `background` unterstützt die Funktion `url()`, um ein Bild mit der gewünschten Textur oder einem Muster zu verlinken. Der Pfad des Links wird innerhalb der Klammern unter Anführungszeichen gesetzt.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Lege unter Verwendung der URL `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png` den `background` der gesamten Seite mit dem `body`-Selektor fest.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `body`-Element sollte eine `background`-Eigenschaft auf eine `url()` mit dem angegebenen Link setzen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: Mithilfe der text-align-Eigenschaft visuelles Gleichgewicht schaffen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3b4EAp'
|
||||
forumTopicId: 301053
|
||||
dashedName: create-visual-balance-using-the-text-align-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dieser Abschnitt des Lehrplans konzentriert sich auf angewandtes visuelles Design. Die erste Aufgabengruppe baut auf dem gegebenen Kartenlayout auf, um eine Reihe von Grundprinzipien darzustellen.
|
||||
|
||||
Ein großer Anteil von Webinhalten besteht aus Text. CSS bietet mehrere Optionen, um sie mit der Eigenschaft `text-align` auszurichten.
|
||||
|
||||
`text-align: justify;` gibt jeder Zeile im Text die gleiche Breite.
|
||||
|
||||
`text-align: center;` zentriert den Text,
|
||||
|
||||
`text-align: right;` richtet den Text rechts aus
|
||||
|
||||
und `text-align: left;` (der Standardwert) richtet den Text links aus.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Zentriere den Text des `h4`-Tags mit dem Inhalt "Google". Richte das Paragrafen-Tag mit den Informationen über die Googles Gründungsgeschichte im Blocksatz (justify) aus.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte die text-align-Eigenschaft auf dem `h4`-Tag verwenden und sie auf `center` setzen.
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-align') == 'center');
|
||||
```
|
||||
|
||||
Dein Code sollte die text-align-Eigenschaft auf dem `p`-Tag verwenden und sie auf `justify` setzen.
|
||||
|
||||
```js
|
||||
assert($('p').css('text-align') == 'justify');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
|
||||
}
|
||||
p {
|
||||
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae2
|
||||
title: Erstelle eine visuelle Richtung, indem ein Element von links nach rechts verblasst
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJqqAE'
|
||||
forumTopicId: 301054
|
||||
dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bei dieser Aufgabe änderst du die `opacity`-Eigenschaft (dt. Deckkraft) eines animierten Elements so, dass es allmählich ausgeblendet wird, während es sich der rechten Bildschirmseite nähert.
|
||||
|
||||
In der gezeigten Animation bewegt sich das runde Element mit dem Farbverlauf bis zur 50%-Marke der Animation nach rechts, entsprechend der `@keyframes`-Regel.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wähle das Element mit der Id `ball` und füge die Eigenschaft `opacity` hinzu, die bei `50%` auf 0.1 festgelegt ist, damit das Element ausgeblendet wird, während es sich nach rechts bewegt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die `keyframes`-Regel zum Ausblenden sollte die Eigenschaft `opacity` auf 0.1 bei 50% setzen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: Verringere die Deckkraft eines Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||
forumTopicId: 301055
|
||||
dashedName: decrease-the-opacity-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Eigenschaft `opacity` wird in CSS verwendet, um die Deckkraft, oder anders betrachtet, die Durchsichtigkeit für ein Element anzupassen.
|
||||
|
||||
<blockquote>Der Wert 1 ist undurchsichtig und nicht transparent.<br> Der Wert 0.5 ist halb durchsichtig. <br> Der Wert 0 ist völlig durchsichtig.</blockquote>
|
||||
|
||||
Der angegebene Wert gilt für das gesamte Element, egal, ob es sich um ein Bild mit etwas Transparenz handelt oder um die Vorder- und Hintergrundfarben eines Textblocks.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Setze die `opacity` der Ankertags auf 0.7 und wähle sie mit der `links`-Klasse aus.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte die Eigenschaft `opacity` der Ankertags auf 0.7 setzen, indem du die Klasse `links` auswählst.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
|
||||
$('style').text()
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad1
|
||||
title: Komplementärfarben kennenlernen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MD3Tr'
|
||||
forumTopicId: 301056
|
||||
dashedName: learn-about-complementary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Farbtheorie und ihr Einfluss im Design-Bereich ist ein umfassendes Thema und in den folgenden Aufgaben werden nur die Grundlagen vorgestellt. Auf einer Website kann Farbe die Aufmerksamkeit auf Inhalte lenken, Emotionen auslösen und visuelle Harmonie schaffen. Die Verwendung verschiedener Farbkombinationen kann das Aussehen einer Website gravierend verändern und das Erstellen einer fein abgestimmten, dem Inhalte angepassten Farbpalette bedarf mitunter einiger Arbeit.
|
||||
|
||||
Der Farbkreis ist ein nützliches Werkzeug, um zu visualisieren, wie Farben miteinander in Beziehung stehen. Er besteht aus kreisförmig angeordneten Farbtönen, wobei ähnliche Töne nahe zusammen und unterschiedliche weiter auseinander liegen. Wenn zwei Farben auf dem Farbkreis gegenüber stehen, nennt man sie Komplementärfarben. Zusammengemischt neutralisieren sie sich und kreieren ein Grau. Nebeneinandergestellt wirken sie jedoch kräftig und sie erzeugen einen starken visuellen Kontrast.
|
||||
|
||||
Einige Beispiele für Komplementärfarben mit ihren HEX-Werten:
|
||||
|
||||
<blockquote>rot (#FF0000) und cyan (#00FFFF)<br>grün (#00FF00) und magenta (#FF00FF)<br>blau (#0000FF) und gelb (#FFFF00)</blockquote>
|
||||
|
||||
Dies unterscheidet sich von dem älteren Farbkreismodell mit den Grundfarben Gelb, Rot und Blau, welches andere Primär- und Komplementärfarben hat und du vielleicht aus der Schule kennst. Die moderne Farbtheorie verwendet das additive RGB-Modell (wie auf einem Computerbildschirm) und das subtraktive CMY(K)-Modell (wie im Druck).
|
||||
|
||||
Es gibt online viele Farbauswahltools mit einer Option zum Finden einer Komplementärfarbe.
|
||||
|
||||
**Tipp:** Der bewusste Einsatz von Farben kann die visuelle Attraktivität einer Seite deutlich erhöhen. Allerdings sollte Farbe nicht alleine verwendet werden, um wichtige Informationen zu vermitteln, weil Nutzer mit Sehbeeinträchtigungen diese eventuell nicht wahrnehmen können. Dieses Thema wird bei den Aufgaben zur angewandten Barrierefreiheit näher behandelt.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ändere die `background-color`-Eigenschaft der Klassen `blue` und `yellow` auf Farben entsprechend ihrem Klassennamen. Sieh dir bewusst an, wie dieselben Farben nebeneinandergestellt anders wirken als auf einem weißen Hintergrund.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `div`-Element mit der Klasse `blue` sollte eine `background-color` von blue haben.
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Das `div`-Element mit der Klasse `yellow` sollte eine `background-color` von yellow haben.
|
||||
|
||||
```js
|
||||
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #000000;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: Tertiärfarben kennenlernen
|
||||
challengeType: 0
|
||||
forumTopicId: 301057
|
||||
dashedName: learn-about-tertiary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Computermonitore und andere Device-Bildschirme erzeugen unterschiedliche Farben, indem sie entsprechende Anteile von rotem, grünem und blauem Licht kombinieren. Dies wird in der modernen Farbtheorie als additives RGB-Farbmodell bezeichnet. Rot (R), Grün (G) und Blau (B) werden Primärfarben genannt. Das Mischen von zwei primären Farben erzeugt die sekundären Farben Cyan (G + B), Magenta (R + B) und Gelb (R + G). Du hast diese Farben bereits in der Komplementärfarben-Aufgabe gesehen. Diese sekundären Farben komplementieren jene Primärfarbe, die bei ihrer Erstellung nicht verwendet wird, und befinden sich auf dem Farbkreis gegenüber von ihr. Zum Beispiel wird Magenta aus Rot und Blau erstellt und es ist komplementär zu Grün.
|
||||
|
||||
Tertiärfarben ergeben sich aus der Kombination einer Primärfarbe mit einem ihrer sekundären Nachbarn. Zum Beispiel ergeben im RGB-Farbmodell Rot (primär) und Gelb (sekundär) Orange (tertiär). Dies erweitert einen einfachen Farbkreis um sechs Farben auf insgesamt zwölf.
|
||||
|
||||
Es gibt verschiedene Methoden zur Auswahl von Farbkombinationen, die zu stimmigen Designs führen. Zum Beispiel können tertiäre Farben im Split-Komplementär-Farbschema verwendet werden. Dieses Schema beginnt mit einer Grundfarbe, die dann mit zwei Farben kombiniert wird, die neben ihrer Komplementärfarbe liegen. Die drei Farben bieten einen starken visuellen Kontrast in einem Design, sind aber subtiler als die Verwendung zweier Komplementärfarben.
|
||||
|
||||
Hier sind drei Farben, die mit dem Split-Komplementär-Schema erstellt wurden:
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Farbe</th><th>Hex-Code</th></tr></thead><thead></thead><tbody><tr><td>orange</td><td>#FF7F00</td></tr><tr><td>cyan</td><td>#00FFFF</td></tr><tr><td>himbeerfarben</td><td>#FF007F</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ändere die `background-color`-Eigenschaft der Klassen `orange`, `cyan` und `raspberry` (dt. Himbeere) auf ihren entsprechenden Farbwert. Stelle sicher, dass du Hex-Codes und nicht Farbnamen verwendest.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `div`-Element mit der Klasse `orange` sollte eine `background-color` von Orange haben.
|
||||
|
||||
```js
|
||||
assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||
```
|
||||
|
||||
Das `div`-Element mit der Klasse `cyan` sollte eine `background-color` von Cyan haben.
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
Das `div`-Element mit der Klasse `raspberry` sollte eine himbeerfarbene `background-color` haben.
|
||||
|
||||
```js
|
||||
assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||
```
|
||||
|
||||
Alle `background-color`-Werte für die Farbklassen sollten Hex-Codes und nicht Farbnamen sein.
|
||||
|
||||
```js
|
||||
assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #FF7F00;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #00FFFF;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #FF007F;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae8
|
||||
title: Lerne wie Bézierkurven funktionieren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
||||
forumTopicId: 301058
|
||||
dashedName: learn-how-bezier-curves-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In der letzten Aufgabe wurde die CSS-Eigenschaft `animation-timing-function` sowie ein paar weitere Schlüsselwörter, die die Geschwindigkeit einer Animation während ihrer Ablaufdauer verändern, vorgestellt. Neben Schlüsselwörtern bietet CSS eine weitere Möglichkeit, um Animationen noch genauer kontrollieren zu können, nämlich mittels Bézierkurven.
|
||||
|
||||
In CSS-Animationen benutzt man Bézierkurven mit der `cubic-bezier`-Funktion. Die Form der Kurve repräsentiert den Ablauf der Animation. Die Kurve befindet sich auf einem 1 mal 1 großen Koordinatensystem. Die x-Achse dieses Koordinatensystems repräsentiert die Dauer der Animation (wie eine Zeitskala) und die y-Achse ist die Änderung in der Animation.
|
||||
|
||||
Die `cubic-bezier`-Funktion besteht aus vier Hauptpunkten. Diese befinden sich auf dem 1 mal 1 großen Raster und heißen: `p0`, `p1`, `p2` und `p3`. `p0` und `p3` sind vordefiniert. Sie sind die Anfangs- und Endpunkte und befinden sich immer an den Positionen (0, 0) und (1, 1). Indem du die x- und y-Werte der anderen beiden Punkte bestimmst - d. h. dadurch, wo du sie im Koordinatensystem platzierst - gibst du die Form der Animationskurve vor. Dies erreicht man in CSS, indem man die x- und y-Werte der `p1` und `p2` "Anker"-Punkte in folgender Form deklariert: `(x1, y1, x2, y2)`. Hier sehen wir ein ganzes Beispiel einer Bézierkurve in CSS:
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
```
|
||||
|
||||
Im obigen Beispiel sind die x- und y-Werte für jeden Punkt gleich. (x1 = 0.25 = y1 und x2 = 0.75 = y2) Wie du dich vielleicht aus Geometrieunterricht erinnerst, ergibt das eine gerade Linie zwischen dem Ursprungspunkt (0, 0) und dem Endpunkt (1, 1). Diese Animation ändert ein Element linear über ihre Dauer und hat denselben Effekt wie die Verwendung des Schlüsselworts `linear`. Mit anderen Worten: Sie verändert sich mit konstanter Geschwindigkeit.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ändere für das Element mit der ID `ball1` den Wert der Eigenschaft `animation-timing-function` von `linear` in eine äquivalente `cubic-bezier`-Funktion. Verwende die im obigen Beispiel angegebenen Punktwerte.
|
||||
|
||||
# --hints--
|
||||
|
||||
Der Wert der Eigenschaft `animation-timing-function` für das Element mit der ID `ball1` sollte eine gleichartige lineare `cubic-bezier` Funktion sein.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#ball1').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
|
||||
);
|
||||
```
|
||||
|
||||
Der Wert der Eigenschaft `animation-timing-function` für das Element mit der ID `ball2` sollte sich nicht ändern.
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512adf
|
||||
title: Erfahre wie CSS @keyframes und Animationseigenschaften funktionieren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||||
forumTopicId: 301059
|
||||
dashedName: learn-how-the-css-keyframes-and-animation-properties-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Um ein Element zu animieren, musst du die Animationseigenschaften und die `@keyframes`-Regel kennen. Die Animationseigenschaften beziehen sich auf das Verhalten der gesamten Animation und die `@keyframes`-Regel bestimmt, welche Elementeigenschaften im Laufe der Animation geändert werden. Es gibt insgesamt acht Animationseigenschaften. In dieser Aufgabe gehen wir es langsam an und konzentrieren uns zunächst auf die beiden Wichtigsten:
|
||||
|
||||
Mit der Eigenschaft `animation-name` legt man die Namen von Animationen fest, die später mit `@keyframes` verwendet werden, um CSS-Regeln ihren entsprechenden Animationen zuzuweisen.
|
||||
|
||||
Mit `animation-duration` bestimmt man die Animationsdauer.
|
||||
|
||||
Mit `@keyframes` beschreibt man was wann innerhalb einer Animation passiert. Dies geschieht durch die Angabe von CSS-Eigenschaften für bestimmte "Frames" (Anm.: ähnlich Schlüsselbildern in der Zeichentrickproduktion) während der Animation, mit Prozentsätzen zwischen 0% und 100%. Wenn du dies mit einem Film vergleichst, würden die CSS-Eigenschaften für 0% beschreiben wie die Elemente in der Eröffnungsszene aussehen. Die CSS-Eigenschaften für 100% würden dem entsprechend das Aussehen der Elemente im Abspann beschreiben. Dann vollzieht CSS die "Verwandlung" (engl. transition) und berechnet die dazwischenliegende Übergangssequenz. Hier ist ein Beispiel, um die Nutzung von `@keyframes` und der Animationseigenschaften zu veranschaulichen:
|
||||
|
||||
```css
|
||||
#anim {
|
||||
animation-name: colorful;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes colorful {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Für das Element mit der Id `anim`, setzt das obige Code-Snippet den `animation-name` auf `colorful` und die `animation-duration` auf 3 Sekunden. Dann verweist die `@keyframes`-Regel auf die Animationseigenschaften mit dem Namen `colorful`. Es legt die Farbe Blau am Animationsanfang (0%) fest, die am Ende zu Gelb übergehen wird (100%). Du bist allerdings nicht auf Anfang-Ende-Übergänge beschränkt. Du kannst die Elementeigenschaften für jeden Prozentsatz zwischen 0% und 100% festlegen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Erstelle eine Animation für das Element mit der Id `rect`, indem du den `animation-name` auf `rainbow` und die `animation-duration` auf 4 Sekunden setzt. Als Nächstes deklarierst du eine `@keyframes`-Regel und setzt die Hintergrundfarbe `background-color` am Anfang der Animation (`0%`) auf Blau, in der Mitte der Animation (`50%`) auf Grün und am Ende der Animation (`100%`) auf Gelb.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das Element mit der Id `rect` sollte eine `animation-name`-Eigenschaft mit einem Wert von `rainbow` haben.
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-name') == 'rainbow');
|
||||
```
|
||||
|
||||
Das Element mit der Id `rect` sollte eine `animation-duration` von 4 Sekunden haben.
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-duration') == '4s');
|
||||
```
|
||||
|
||||
Die `@keyframes`-Regel sollte als `animation-name` den Wert `rainbow` verwenden.
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
```
|
||||
|
||||
Die `@keyframes`-Regel für `rainbow` sollte bei 0% eine `background-color` von `blue` verwenden.
|
||||
|
||||
```js
|
||||
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
```
|
||||
|
||||
Die `@keyframes`-Regel für `rainbow` sollte bei 50% eine `background-color` von `green` verwenden.
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
```
|
||||
|
||||
Die `@keyframes`-Regel für rainbow sollte bei 100% eine `background-color` von `yellow` verwenden.
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acb
|
||||
title: Fixiere ein Element mittels absoluter Positionierung an seinem Elternteil
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
||||
forumTopicId: 301060
|
||||
dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die nächste Option für die Eigenschaft `position` ist `absolute`, welche das Element relativ zu seinem übergeordneten Container ausrichtet und daran fixiert. Anders als die Positionierungseigenschaft `relative` entfernt dies das Element aus dem normalen Fluss des Dokuments, sodass umgebende Elemente es ignorieren. Die CSS-Offset-Eigenschaften (oben oder unten bzw. links oder rechts) werden verwendet, um die Position anzupassen.
|
||||
|
||||
Ein bemerkenswertes Detail von absoluter Positionierung ist, dass das platzierte Element relativ seinem nächstgelegenen, übergeordneten Element *mit Position-Eigenschaft* gesperrt wird. Solltest du vergessen eine Positionsregel zum übergeordneten Element hinzuzufügen (dies geschieht normalerweise mit `position: relative;`), sucht der Browser nach oben hin weiter und wird notfalls auf das `body`-Tag zurückgreifen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sperre das `#searchbar`-Element oben rechts in seinem Elternteil `section`, indem du seine `position` als `absolute` deklarierst. Gib ihm `top` und `right`-Offsets von jeweils 50 Pixel.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `#searchbar`-Element sollte eine `position`-Eigenschaft mit Wert `absolute` haben.
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
Dein Code sollte einen `top`-Offset von 50 Pixel auf dem `#searchbar`-Element verwenden.
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('top') == '50px');
|
||||
```
|
||||
|
||||
Dein Code sollte einen `right`-Offset von 50 Pixel auf dem `#searchbar`-Element verwenden.
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('right') == '50px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
|
||||
|
||||
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acc
|
||||
title: Sperren eines Elements im Browserfenster mit der Positionierungseigenschaft fixed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDNUR'
|
||||
forumTopicId: 301061
|
||||
dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Das nächste Layoutschema, das CSS anbietet, ist die Positionierungseigenschaft `fixed`. Dies ist eine Art absoluter Positionierung, die ein Element relativ zum Browserfenster sperrt. Ähnlich wie bei der absoluten Positionierung, wird es mit den Offset-Eigenschaften verwendet und entfernt auch das Element aus dem normalen Fluss des Dokuments. Andere Elemente "realisieren" nicht mehr, wo sie positioniert sind, was an anderer Stelle Layoutanpassungen erfordern kann.
|
||||
|
||||
Ein wichtiger Unterschied zwischen `fixed` und `absolute` Positionierung ist, dass sich ein fix positioniertes Element nicht bewegt, wenn ein Nutzer scrollt.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Die Navigationsleiste im Code ist mit einer Id von `navbar` markiert. Ändere seine `position` auf `fixed` und gib ihm einen Offset von 0 Pixel von `top` und 0 Pixel von `left`. Nachdem du den Code hinzugefügt hast, scrolle im Vorschaufenster auf und ab, um zu sehen, wie die Navigationsleiste an ihrem Platz bleibt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `#navbar`-Element sollte eine `position`-Eigenschaft mit Wert `fixed` haben.
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('position') == 'fixed');
|
||||
```
|
||||
|
||||
Dein Code sollte einen `top`-Offset von 0 Pixel auf dem `#navbar`-Element verwenden.
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('top') == '0px');
|
||||
```
|
||||
|
||||
Dein Code sollte einen `left`-Offset von 0 Pixel auf dem `#navbar`-Element verwenden.
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('left') == '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#navbar {
|
||||
|
||||
|
||||
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae4
|
||||
title: Erstelle einen CSS "Herzschlag" mit unendlichen Animationsdurchläufen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cDZpDUr'
|
||||
forumTopicId: 301062
|
||||
dashedName: make-a-css-heartbeat-using-an-infinite-animation-count
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hier ist ein weiteres Beispiel einer kontinuierlichen Animation mit der `animation-iteration-count`-Eigenschaft, die das Herz verwendet, das du bei einer vorherigen Aufgabe entwickelt hast.
|
||||
|
||||
Die eine Sekunde lange Herzschlag-Animation besteht aus zwei Stücken. Die `heart` Elemente (einschließlich der `:before` und `:after` Teile) sind so animiert, dass sie ihre Größe mit der `transform`-Eigenschaft ändern. Das Hintergrund-`div` wechselt seine Farbe mit der `background`-Eigenschaft.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Lass das Herz beständig weiter schlagen, indem du die `animation-iteration-count`-Eigenschaft sowohl für die `back` als auch die `heart`-Klasse hinzufügst und den Wert auf `infinite` setzt. Die `heart:before` und `heart:after` Selektoren benötigen keine Animationseigenschaften.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die `animation-iteration-count`-Eigenschaft für die `heart`-Klasse sollte einen Wert von `infinite` besitzen.
|
||||
|
||||
```js
|
||||
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
Die Eigenschaft `animation-iteration-count` für die `back`-Klasse sollte einen Wert von `infinite` haben.
|
||||
|
||||
```js
|
||||
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512aea
|
||||
title: Natürlichere Bewegungen mittels Bézierkurven erzeugen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7akWUv'
|
||||
forumTopicId: 301063
|
||||
dashedName: make-motion-more-natural-using-a-bezier-curve
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In dieser Aufgabe wird ein Element animiert, das die Bewegung eines Jonglierballs simulieren soll. In früheren Aufgaben wurden die `linear`- und `ease-out`-Bézierkurven behandelt, jedoch stellt keine davon die Jonglierbewegung akkurat dar. Dafür musst du eine Bézierkurve individuell anpassen.
|
||||
|
||||
Die `animation-timing-function` wiederholt sich automatisch bei jedem Keyframe, wenn `animation-iteration-count` (dt. Anzahl der Animationsdurchläufe) auf infinite (dt. unendlich) gesetzt wird. Da in der Mitte der Animation (bei `50%`) eine Keyframe-Regel definiert ist, ergeben sich zwei identische Animationsabläufe für die Aufwärts- und Abwärtsbewegung des Balles.
|
||||
|
||||
Die folgende kubische Bézierkurve simuliert eine Jonglierbewegung:
|
||||
|
||||
```css
|
||||
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||
```
|
||||
|
||||
Beachte, dass der Wert von y2 größer als 1 ist. Obwohl die kubische Bézierkurve auf einem Koordinatensystem von 1 x 1 platziert ist und dieses nur x-Werte von 0 bis 1 akzeptiert, kann der y-Wert größer als 1 sein. Dadurch entsteht eine Springbewegung, die sich gut zur Simulation eines Jonglierballs eignet.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ändere den Wert der `animation-timing-function` des Elements mit der Id `green` in eine `cubic-bezier`-Funktion mit x1, y1, x2, y2 Werten von 0.311, 0.441, 0.444, 1.649.
|
||||
|
||||
# --hints--
|
||||
|
||||
Der Wert der Eigenschaft `animation-timing-function` für das Element mit der Id `green` sollte wie angegeben eine `cubic-bezier`-Funktion mit x1, y1, x2, y2 Werten sein.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#green').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.311, 0.441, 0.444, 1.649)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 58a7a6ebf9a6318348e2d5aa
|
||||
title: Den Füllmodus einer Animation bearbeiten
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDmcE'
|
||||
forumTopicId: 301064
|
||||
dashedName: modify-fill-mode-of-an-animation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
So weit, so gut, aber es funktioniert noch nicht richtig. Beachte wie die Animation nach `500ms` zurückgesetzt wird, wodurch der Button wieder seine ursprüngliche Farbe erhält. Wir möchten erreichen, dass der Button hervorgehoben bleibt.
|
||||
|
||||
Dies gelingt durch Setzen der Eigenschaft `animation-fill-mode` auf `forwards`. Der `animation-fill-mode` legt den Stil fest, der auf ein Element angewendet wird, nachdem die Animation beendet ist. Man definiert dies folgendermaßen:
|
||||
|
||||
```css
|
||||
animation-fill-mode: forwards;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Setze die `animation-fill-mode`-Eigenschaft von `button:hover` auf `forwards`, damit der Button hervorgehoben bleibt, falls ein Nutzer mit dem Cursor darüber fährt.
|
||||
|
||||
# --hints--
|
||||
|
||||
`button:hover` sollte eine `animation-fill-mode`-Eigenschaft mit einem Wert von `forwards` haben.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512aca
|
||||
title: Versetze ein relativ positioniertes Element mit CSS-Offsets
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bQEA4'
|
||||
forumTopicId: 301065
|
||||
dashedName: move-a-relatively-positioned-element-with-css-offsets
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die CSS-Offsets von `top` oder `bottom` bzw. `left` oder `right` teilen dem Browser mit, wie weit er ein Element im Verhältnis zu dessen Ursprungsposition im normalen Fluss versetzen soll. Ein Offset setzt ein Element von einer gegebenen Position ab, somit bewegt sich dieses Element von der referenzierten Seite weg (effektiv in die entgegengesetzte Richtung). Wie du in der letzten Aufgabe gesehen hast, bewegte der `top`-Offset die Überschrift `h2` nach unten. Analog dazu, bewegt ein `left`-Offset ein Element nach rechts.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Verwende Offsets, um die `h2` um 15 Pixel nach rechts und 10 Pixel nach oben zu bewegen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte Offsets verwenden, um die `h2` 10px relativ nach oben zu versetzen. Anders ausgedrückt, setze es 10px von `bottom` ab, wo es sich normalerweise befindet.
|
||||
|
||||
```js
|
||||
assert($('h2').css('bottom') == '10px');
|
||||
```
|
||||
|
||||
Dein Code sollte Offsets verwenden, um die `h2` 15px relativ nach rechts zu versetzen. Anders ausgedrückt, setze es 15px von `left` ab, wo es sich normalerweise befindet.
|
||||
|
||||
```js
|
||||
assert($('h2').css('left') == '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
left: 15px;
|
||||
bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ace
|
||||
title: Verschiebe Elemente mit der float-Eigenschaft nach links oder rechts
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDqu2'
|
||||
forumTopicId: 301066
|
||||
dashedName: push-elements-left-or-right-with-the-float-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Das nächste Mittel zur Positionierung verwendet nicht die `position`-, sondern `float`-Eigenschaft von Elementen. Float-Elemente sind nicht Teil des normalen Flusses und werden entweder in Richtung der linken (`left`) oder rechten (`right`) Seite ihres übergeordneten Containers geschoben. Float wird üblicherweise gemeinsam mit der Eigenschaft `width` verwendet, um festzulegen, wie viel horizontalen Platz das Element benötigt.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Das angegebene Markup würde gut als Zweispalten-Layout, mit den `section`- und `aside`-Elementen nebeneinander, funktionieren. Gib dem Element `#left` eine `float`-Eigenschaft von `left` und dem Element `#right` eine `float`-Eigenschaft von `right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das Element mit der Id `left` sollte einen `float`-Wert von `left` haben.
|
||||
|
||||
```js
|
||||
assert($('#left').css('float') == 'left');
|
||||
```
|
||||
|
||||
Das Element mit der Id `right` sollte einen `float`-Wert von `right` haben.
|
||||
|
||||
```js
|
||||
assert($('#right').css('float') == 'right');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
float: right;
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac2
|
||||
title: Die Schriftgröße mehrerer Überschriften festlegen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpQNT3'
|
||||
forumTopicId: 301067
|
||||
dashedName: set-the-font-size-for-multiple-heading-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die `font-size`-Eigenschaft wird verwendet, um die Schriftgröße eines Elements festzulegen. Dieselbe Regel kann für mehrere Elemente verwendet werden, um innerhalb einer Seite ein einheitliches Schriftbild zu kreieren. In dieser Aufgabe wirst du die Schriftgrößen aller Überschriften-Tags (`h1` bis `h6`) definieren, um sie einheitlich und ausgeglichen zu proportionieren.
|
||||
|
||||
# --instructions--
|
||||
|
||||
<p>Lege innerhalb der <code>style</code>-Tags folgende <code>font-size</code> fest:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>h1</code>-Tag auf 68px.</li>
|
||||
<li><code>h2</code>-Tag auf 52px.</li>
|
||||
<li><code>h3</code>-Tag auf 40px.</li>
|
||||
<li><code>h4</code>-Tag auf 32px.</li>
|
||||
<li><code>h5</code>-Tag auf 21px.</li>
|
||||
<li><code>h6</code>-Tag auf 14px.</li>
|
||||
</ul>
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-size` für das Tag `h1` auf 68 Pixel setzen.
|
||||
|
||||
```js
|
||||
const fontSizeOfh1 = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh1 === '68px');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-size` für das Tag `h2` auf 52 Pixel setzen.
|
||||
|
||||
```js
|
||||
const fontSizeOfh2 = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh2 === '52px');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-size` für das Tag `h3` auf 40 Pixel setzen.
|
||||
|
||||
```js
|
||||
const fontSizeOfh3 = new __helpers.CSSHelp(document).getStyle('h3')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh3 === '40px');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-size` für das Tag `h4` auf 32 Pixel setzen.
|
||||
|
||||
```js
|
||||
const fontSizeOfh4 = new __helpers.CSSHelp(document).getStyle('h4')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh4 === '32px');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-size` für das Tag `h5` auf 21 Pixel setzen.
|
||||
|
||||
```js
|
||||
const fontSizeOfh5 = new __helpers.CSSHelp(document).getStyle('h5')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh5 === '21px');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-size` für das Tag `h6` auf 14 Pixel setzen.
|
||||
|
||||
```js
|
||||
const fontSizeOfh6 = new __helpers.CSSHelp(document).getStyle('h6')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh6 === '14px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac4
|
||||
title: Die Schriftgröße von Absätzen festlegen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJ36Cr'
|
||||
forumTopicId: 301068
|
||||
dashedName: set-the-font-size-of-paragraph-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Eigenschaft `font-size` ist nicht auf Überschriften beschränkt, sie kann auf alle Elemente angewendet werden, die Text enthalten.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ändere den Wert der Eigenschaft `font-size` für den Absatz auf 16px, um ihn besser sichtbar zu machen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `p`-Tag sollte eine `font-size` von 16 Pixel haben.
|
||||
|
||||
```js
|
||||
assert($('p').css('font-size') == '16px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac3
|
||||
title: Die Schriftstärke für mehrere Überschriften-Tags festlegen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWRHq'
|
||||
forumTopicId: 301069
|
||||
dashedName: set-the-font-weight-for-multiple-heading-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In der letzten Aufgabe hast du die Schriftgröße (`font-size`) für alle Überschriften-Tags definiert. Nun wirst du ihre Schriftstärke (`font-weight`) anpassen.
|
||||
|
||||
Die Eigenschaft `font-weight` legt fest, wie dick oder dünn Schriftzeichen in einem Textabschnitt sind.
|
||||
|
||||
# --instructions--
|
||||
|
||||
<ul><li>Setze die <code>font-weight</code>-Eigenschaft des <code>h1</code>-Tags auf 800.</li><li>Setze die <code>font-weight</code>-Eigenschaft des <code>h2</code>-Tags auf 600.</li><li>Setze die <code>font-weight</code>-Eigenschaft des <code>h3</code>-Tags auf 500.</li><li>Setze die <code>font-weight</code>-Eigenschaft des <code>h4</code>-Tags auf 400.</li><li>Setze die <code>font-weight</code>-Eigenschaft des <code>h5</code>-Tags auf 300.</li><li>Setze die <code>font-weight</code>-Eigenschaft des <code>h6</code>-Tags auf 200.</li></ul>
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-weight` für das Tag `h1` auf 800 setzen.
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-weight') == '800');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-weight` für das Tag `h2` auf 600 setzen.
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-weight') == '600');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-weight` für das Tag `h3` auf 500 setzen.
|
||||
|
||||
```js
|
||||
assert($('h3').css('font-weight') == '500');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-weight` für das Tag `h4` auf 400 setzen.
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-weight') == '400');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-weight` für das Tag `h5` auf 300 setzen.
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-weight') == '300');
|
||||
```
|
||||
|
||||
Dein Code sollte die Eigenschaft `font-weight` für das Tag `h6` auf 200 setzen.
|
||||
|
||||
```js
|
||||
assert($('h6').css('font-weight') == '200');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
font-weight: 800;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
font-weight: 600;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
font-weight: 300;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac5
|
||||
title: Zeilenhöhe von Absätzen festlegen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWdcv'
|
||||
forumTopicId: 301070
|
||||
dashedName: set-the-line-height-of-paragraphs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS bietet die Eigenschaft `line-height`, um die Höhe jeder Zeile in einem Textblock zu ändern. Wie der Name andeutet, ändert er die vertikale Ausdehnung der jeweiligen Zeilen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Füge eine `line-height`-Eigenschaft zum `p`-Tag hinzu und setze sie auf 25px.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte die `line-height`-Eigenschaft für das `p`-Tag auf 25 Pixel setzen.
|
||||
|
||||
```js
|
||||
assert($('p').css('line-height') == '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae9
|
||||
title: Eine Grafik mit einer Bézierkurve bewegen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bnRCK'
|
||||
forumTopicId: 301071
|
||||
dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In einer vorherigen Aufgabe wurde das Schlüsselwort `ease-out` behandelt, welches eine Änderung der Animationsgeschwindigkeit beschreibt, die zunächst beschleunigt und dann am Ende der Animation verlangsamt. Rechts wird der Unterschied zwischen dem `ease-out` Schlüsselwort (für das blaue Element) und dem `linear` Schlüsselwort (für das rote Element) demonstriert. Ähnliche Animationsabläufe wie mit dem Schlüsselwort `ease-out` können auch durch eine benutzerdefinierte kubische Bézierkurvenfunktion erreicht werden.
|
||||
|
||||
Im Allgemeinen führt das Ändern der Ankerpunkte `p1` und `p2` zu unterschiedlichen Bézierkurven und somit zu anderen Animationsabläufen. Hier ist ein Beispiel für eine Bezierkurve, die Werte verwendet, um den Style `ease-out` zu imitieren:
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
```
|
||||
|
||||
Denke daran, dass alle `cubic-bezier`-Funktionen mit `p0` bei (0, 0) beginnen und mit `p3` bei (1, 1) enden. In diesem Beispiel bewegt sich die Kurve schneller durch die y-Achse (beginnt bei 0, geht über zu `p1` mit y-Wert 0, dann zu `p2` mit y-Wert 1) als sie sich durch die x-Achse bewegt (0 am Anfang, dann 0 für `p1`, bis zu 0.58 für `p2`). Dadurch schreitet die Veränderung des animierten Elements schneller voran als die Dauer der Animation für diesen Abschnitt. Gegen Ende der Kurve kehrt sich die Beziehung zwischen den Änderungen der x- und y-Werte um. Der y-Wert bewegt sich von 1 nach 1 (keine Änderung) und der x-Wert bewegt sich von 0.58 nach 1, wodurch sich die Animation, verglichen mit der Animationsdauer, langsamer ändert.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Um die Wirkung dieser Bézierkurve in Aktion zu sehen, ändere die `animation-timing-function` des Elements mit der Id `red` in eine `cubic-bezier` Funktion mit x1, y1, x2 und y2 mit Werten von jeweils `0, 0, 0.58, 1`. Dadurch werden sich beide Elemente durchweg ähnlich bewegen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Der Wert der `animation-timing-function`-Eigenschaft des Elements mit der Id `red` sollte eine `cubic-bezier`-Funktion mit den Werten x1, y1, x2 und y2 von 0, 0, 0.58 und 1 sein.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)'
|
||||
);
|
||||
```
|
||||
|
||||
Das Element mit der Id `red` sollte nicht mehr die `animation-timing-function`-Eigenschaft von `linear` haben.
|
||||
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
```
|
||||
|
||||
Der Wert der Eigenschaft `animation-timing-function` für das Element mit der Id `blue` sollte sich nicht ändern.
|
||||
|
||||
```js
|
||||
const blueBallAnimation = __helpers.removeWhiteSpace(
|
||||
$('#blue').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
blueBallAnimation == 'ease-out' ||
|
||||
blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad7
|
||||
title: Erstelle mit einem linearen Farbverlauf ein gestreiftes Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bmQh2'
|
||||
forumTopicId: 301072
|
||||
dashedName: use-a-css-linear-gradient-to-create-a-striped-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die `repeating-linear-gradient()`-Funktion ist sehr ähnlich zur `linear-gradient()` mit dem Unterschied, dass sie den angegebenen Farbverlauf wiederholt. `repeating-linear-gradient()` akzeptiert eine Vielzahl von Werten, aber aus Gründen der Einfachheit arbeitest du in dieser Aufgabe nur mit einem Winkel und Farbstoppwerten.
|
||||
|
||||
Der Winkelwert definiert die Richtung des Verlaufes. Farbstopps sind wie width-Werte, bei denen ein Übergang stattfindet, und sie werden mit einem Prozentsatz oder in Pixel angegeben.
|
||||
|
||||
In dem Beispiel im Code-Editor, beginnt der Farbverlauf mit der Farbe `yellow` bei 0 Pixel, die sich mit der zweiten Farbe `blue` bei 40 Pixel vermischt. Da die nächste Farbe auch bei 40 Pixel liegt, ändert sich der Farbverlauf sofort zur dritten Farbe `green`, die sich selbst in den vierten Farbwert `red` vermischt, da dieser 80 Pixel weit vom Anfang des Farbverlaufs entfernt liegt.
|
||||
|
||||
In diesem Beispiel hilft es sich die Farbstopps als Paare vorzustellen, wobei sich die Farben in Zweierschritten vermischen.
|
||||
|
||||
```css
|
||||
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
|
||||
```
|
||||
|
||||
Wenn je zwei Farbstopps den gleichen Farbwert haben, ist der Verlauf zwischen ihnen ja nicht erkennbar und gefolgt von einem harten Übergang zur nächsten Farbe erhält man Streifen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Erstelle Streifen, indem du der `repeating-linear-gradient()`-Funktion einen Verlaufswinkel von `45deg` zuweist. Setze dann die ersten zwei Farbstopps auf `yellow` und lasse die zweite Farbe auf `black` stoppen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Der Winkel der `repeating-linear-gradient()`-Funktion sollte 45 Grad betragen.
|
||||
|
||||
```js
|
||||
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
```
|
||||
|
||||
Der Winkel der `repeating-linear-gradient()`-Funktion sollte nicht mehr 90 Grad sein.
|
||||
|
||||
```js
|
||||
assert(!code.match(/90deg/gi));
|
||||
```
|
||||
|
||||
Der Farbstopp bei 0 Pixel sollte `yellow` sein.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
Der erste Farbstopp bei 40 Pixel sollte `yellow` sein.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
```
|
||||
|
||||
Der zweite Farbstopp bei 40 Pixel sollte `black` sein.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
```
|
||||
|
||||
Der letzte Farbstopp bei 80 Pixel sollte `black` sein.
|
||||
|
||||
```js
|
||||
assert(code.match(/black\s+?80px/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
yellow 0px,
|
||||
blue 40px,
|
||||
green 40px,
|
||||
red 80px
|
||||
);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
yellow 0px,
|
||||
yellow 40px,
|
||||
black 40px,
|
||||
black 80px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae0
|
||||
title: Verwende eine CSS-Animation, um den Hover-Status eines Buttons zu ändern
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4vZAa'
|
||||
forumTopicId: 301073
|
||||
dashedName: use-css-animation-to-change-the-hover-state-of-a-button
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Du kannst `@keyframes` verwenden, um die Farbe eines Buttons seinem Hover-Status entsprechend zu ändern (d. h. wenn ein Nutzer mit dem Cursor darüber fährt).
|
||||
|
||||
In folgendem Beispiel verbreitert sich das Bild in einem Hover-Fall:
|
||||
|
||||
```html
|
||||
<style>
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
img:hover {
|
||||
animation-name: width;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
@keyframes width {
|
||||
100% {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/applied-visual-design/google-logo.png" alt="Google's Logo" />
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Beachte, dass `ms` für Millisekunden steht, wobei 1000ms 1s entsprechen.
|
||||
|
||||
Verwende `@keyframes`, um die `background-color` des `button` zu ändern, sodass sie `#4791d0` wird, wenn ein Benutzer darüber fährt. Die `@keyframes`-Regel sollte nur einen Eintrag bei `100%` haben.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die @keyframes-Regel sollte "background-color" als `animation-name` verwenden.
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
```
|
||||
|
||||
Es sollte eine Regel unter `@keyframes` geben, die die `background-color` bei 100% in `#4791d0` ändert.
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adb
|
||||
title: Verwende die transform-Eigenschaft skewX, um ein Element entlang der x-Achse zu verzerren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLP8Sr'
|
||||
forumTopicId: 301074
|
||||
dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die nächste Funktion der Eigenschaft `transform` ist `skewX()`, die das ausgewählte Element entlang seiner x-Achse (horizontal) um einen bestimmten Grad verzerrt.
|
||||
|
||||
Der folgende Code verzerrt das Absatzelement um -32 Grad entlang der x-Achse.
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: skewX(-32deg);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Verzerre das Element mit der Id `bottom` um 24 Grad entlang der x-Achse mit der `transform`-Eigenschaft.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das Element mit der Id `bottom` sollte um 24 Grad entlang seiner X-Achse verzerrt werden.
|
||||
|
||||
```js
|
||||
assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adc
|
||||
title: Verwende die transform-Eigenschaft skewY, um ein Element entlang der y-Achse zu verzerren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
|
||||
forumTopicId: 301075
|
||||
dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Da die `skewX()`-Funktion ein ausgewähltes Element entlang der x-Achse um einen bestimmten Grad krümmt, überrascht es nicht, dass `skewY()` ein Element entlang der y-Achse verzerrt.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Verzerre das Element mit der Id `top` um -10 Grad entlang der y-Achse mithilfe der Eigenschaft `transform`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das Element mit der Id `top` sollte um -10 Grad entlang seiner y-Achse verzerrt werden.
|
||||
|
||||
```js
|
||||
assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
transform: skewY(-10deg);
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad9
|
||||
title: Verwende die transform-Eigenschaft mit scale, um die Größe eines Elements zu ändern
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZVSg'
|
||||
forumTopicId: 301076
|
||||
dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Um die Skalierung eines Elements zu ändern, bietet CSS die Eigenschaft `transform` zusammen mit der Funktion `scale()`. Das folgende Code-Beispiel verdoppelt die Größe aller Absatzelemente auf der Seite:
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: scale(2);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Vergrößere das Element mit der Id `ball2` auf das 1,5-fache seiner ursprünglichen Größe.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die Eigenschaft `transform` für `#ball2` sollte so eingestellt werden, dass er 1,5-mal so groß ist.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
</style>
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ada
|
||||
title: Verwende die transform-Eigenschaft mit scale, um ein Element bei einem Hover zu vergrößern
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLPJuM'
|
||||
forumTopicId: 301077
|
||||
dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Eigenschaft `transform` hat eine Vielzahl von Funktionen, mit denen man Elemente z. B. skalieren, verschieben, drehen oder verzerren kann. Wenn Pseudoklassen wie `:hover` verwendet werden, die auf einen bestimmten Zustand eines Elements verweisen, können sie mit der `transform`-Eigenschaft einfach interaktiv gemacht werden.
|
||||
|
||||
Hier ist ein Beispiel, um die Absatzelemente auf das 2,1-fache ihrer ursprünglichen Größe zu skalieren, wenn ein Benutzer über sie fährt:
|
||||
|
||||
```css
|
||||
p:hover {
|
||||
transform: scale(2.1);
|
||||
}
|
||||
```
|
||||
|
||||
**Hinweis:** Das Anwenden einer Transformation auf ein `div`-Element wirkt sich auch auf alle seine Unterelemente aus.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Füge eine CSS-Regel für den `hover`-Status des `div` hinzu und verwende die Eigenschaft `transform`, um das `div`-Element auf das 1,1-fache seiner Ursprungsgröße zu skalieren, wenn ein Benutzer darüber fährt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die Größe des `div`-Elements sollte um das 1,1-fache skaliert werden, wenn ein Benutzer über das Element fährt.
|
||||
|
||||
```js
|
||||
assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
div:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab9
|
||||
title: Benutze das em-Tag, um Text kursiv zu setzen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJRBtp'
|
||||
forumTopicId: 301078
|
||||
dashedName: use-the-em-tag-to-italicize-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Um Text hervorzuheben, kannst du das `em`-Tag verwenden. Dies stellt Text kursiv dar, indem der Browser die CSS-Regel `font-style: italic;` auf das Element anwenden.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Umschließe den Inhalt des Absatz-Tags mit einem `em`-Tag, um ihn zu betonen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte dem Markup ein `em`-Tag hinzufügen.
|
||||
|
||||
```js
|
||||
assert($('em').length == 1);
|
||||
```
|
||||
|
||||
Das `em`-Tag sollte den Inhalt des `p`-Tags umfassen, aber nicht das `p`-Tag selbst.
|
||||
|
||||
```js
|
||||
assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512aba
|
||||
title: Streiche Text mit dem s-Tag durch
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301079
|
||||
dashedName: use-the-s-tag-to-strikethrough-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Um Text mit einer horizontalen Linie durchzustreichen, kannst du das `s`-Tag verwenden. Es stellt einen Textabschnitt als ungültig dar. Mit dem `s`-Tag wendet der Browser die CSS-Regel `text-decoration: line-through;` auf das Element an.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Umschließe mit dem `s`-Tag `Google` innerhalb des `h4`-Tags und füge dann das Wort `Alphabet` ohne die durchgestrichene Formatierung daneben ein.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte ein `s`-Tag zum Markup hinzufügen.
|
||||
|
||||
```js
|
||||
assert($('s').length == 1);
|
||||
```
|
||||
|
||||
Ein `s`-Tag sollte den Text `Google` im `h4`-Tag umschließen. Es sollte nicht das Wort `Alphabet` enthalten.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4 > s')
|
||||
.text()
|
||||
.match(/Google/gi) &&
|
||||
!$('h4 > s')
|
||||
.text()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Du solltest das Wort `Alphabet` mit dem `h4`-Tag umfassen, allerdings ohne es durchzustreichen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4')
|
||||
.html()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s> Alphabet</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab7
|
||||
title: Verwende das strong-Tag, um Text fett zu formatieren
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/ceJNBSb'
|
||||
forumTopicId: 301080
|
||||
dashedName: use-the-strong-tag-to-make-text-bold
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Um Text fett zu formatieren, kannst du das `strong`-Tag verwenden. Dies wird häufig verwendet, um die Aufmerksamkeit auf einen wichtigen Textteil zu lenken. Mit dem `strong`-Tag wendet der Browser das CSS von `font-weight: bold;` auf das Element an.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Umschließe den Text `Stanford University` mit einem `strong`-Tag innerhalb des `p`-Tags (lass den Punkt weg).
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte ein `strong`-Tag in das Markup einfügen.
|
||||
|
||||
```js
|
||||
assert($('strong').length == 1);
|
||||
```
|
||||
|
||||
Das `strong`-Tag sollte innerhalb des `p`-Tags sein.
|
||||
|
||||
```js
|
||||
assert($('p').children('strong').length == 1);
|
||||
```
|
||||
|
||||
Das `strong`-Tag sollte die Worte `Stanford University` umschließen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('strong')
|
||||
.text()
|
||||
.match(/^Stanford University\.?$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac0
|
||||
title: Verwende die Eigenschaft text-transform, um Text in Großbuchstaben zu schreiben
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZQSP'
|
||||
forumTopicId: 301081
|
||||
dashedName: use-the-text-transform-property-to-make-text-uppercase
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die `text-transform`-Eigenschaft in CSS wird verwendet, um das Aussehen von Text zu verändern. Es ist ein einfacher Weg, um sicherzustellen, dass der Text auf einer Webseite einheitlich erscheint, ohne den Textinhalt der eigentlichen HTML-Elemente ändern zu müssen.
|
||||
|
||||
Die folgende Tabelle zeigt, wie die verschiedenen `text-transform`-Werte den Beispieltext "Transform me" verändern.
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Wert</th><th>Ergebnis</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>Verwende den Standardwert</td></tr><tr><td><code>inherit</code></td><td>Verwendet den <code>text-transform</code>-Wert aus dem übergeordneten Element</td></tr><tr><td><code>none</code></td><td><strong>Standard:</strong> Verwendet den ursprünglichen Text</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wandle den Text des `h4` Elements mit der Eigenschaft `text-transform` in Großbuchstaben um.
|
||||
|
||||
# --hints--
|
||||
|
||||
Der `h4` Text sollte in Großbuchstaben (`uppercase`) geschrieben sein.
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-transform') === 'uppercase');
|
||||
```
|
||||
|
||||
Der ursprüngliche Text des h4-Tags sollte nicht geändert werden.
|
||||
|
||||
```js
|
||||
assert($('h4').text() !== $('h4').text().toUpperCase());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab8
|
||||
title: Unterstreiche Text mit dem u-Tag
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6aQCL'
|
||||
forumTopicId: 301082
|
||||
dashedName: use-the-u-tag-to-underline-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Um Text zu unterstreichen, kannst du das `u`-Tag verwenden. Damit werden häufig bemerkenswerte Textteile hervorgehoben. Mit dem `u`-Tag wendet der Browser das CSS von `text-decoration: underline;` auf das Element an.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Schließe das `u`-Tag nur um den Text `Ph.D. students`.
|
||||
|
||||
**Hinweis:** Vermeide das `u`-Tag, wenn man es mit einem Link verwechseln könnte. Anker-Tags werden ebenfalls standardmäßig unterstrichen formatiert.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte dem Markup ein `u`-Tag hinzufügen.
|
||||
|
||||
```js
|
||||
assert($('u').length === 1);
|
||||
```
|
||||
|
||||
Das `u`-Tag sollte den Text `Ph.D. students` umschließen.
|
||||
|
||||
```js
|
||||
assert($('u').text() === 'Ph.D. students');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: Einen negativen Außenabstand zu einem Element hinzufügen
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
dashedName: add-a-negative-margin-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Der `margin` eines Elements steuert den Abstand zwischen dem `border` (Rahmen) eines Elements und den umgebenden Elementen.
|
||||
|
||||
Wenn du den `margin` eines Elements auf einen negativen Wert setzt, wird das Element größer.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Versuche, den `margin` auf einen negativen Wert zu setzen, wie bei der roten Box.
|
||||
|
||||
Ändere den `margin` der blauen Box auf `-15px`, damit sie die gesamte horizontale Breite der gelben Box um sie herum ausfüllt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Deine `blue-box`-Klasse sollte Elementen einen `margin` von `-15px` geben.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '-15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: Füge Rahmen rund um deine Elemente hinzu
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
dashedName: add-borders-around-your-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS-Rahmen haben Eigenschaften wie `style`, `color` und `width`.
|
||||
|
||||
Wenn wir beispielsweise einen roten, 5 Pixel großen Rahmen um ein HTML-Element herum erstellen wollten, könnten wir diese Klasse verwenden:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.thin-red-border {
|
||||
border-color: red;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Erstelle eine Klasse mit dem Namen `thick-green-border`. Diese Klasse soll einen 10px breiten, durchgezogenen, grünen Rahmen um ein HTML-Element hinzufügen. Wende die Klasse auf dein Katzenfoto an.
|
||||
|
||||
Denke daran, dass du mehrere Klassen auf ein Element anwenden kannst, indem du das Attribut `class` verwendest und jeden Klassennamen mit einem Leerzeichen trennst. Zum Beispiel:
|
||||
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `img`-Element sollte die Klasse `smaller-image` enthalten.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Dein `img`-Element sollte die Klasse `thick-green-border` enthalten.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
Dein Bild sollte eine Rahmenbreite von `10px` haben.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').hasClass('thick-green-border') &&
|
||||
parseInt($('img').css('border-top-width'), 10) >= 8 &&
|
||||
parseInt($('img').css('border-top-width'), 10) <= 12
|
||||
);
|
||||
```
|
||||
|
||||
Dein Bild sollte den Rahmenstil `solid` besitzen.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-right-style') === 'solid');
|
||||
```
|
||||
|
||||
Der Rahmen um dein `img`-Element sollte grün sein.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-width: 10px;
|
||||
border-color: green;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: Füge unterschiedliche Außenabstände zu jeder Seite eines Elementes hinzu
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
dashedName: add-different-margins-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Manchmal willst du ein Element so anpassen, dass es auf jeder seiner Seiten einen anderen `margin` hat.
|
||||
|
||||
Mit CSS kannst du den `margin` aller vier einzelnen Seiten eines Elements mit den Eigenschaften `margin-top`, `margin-right`, `margin-bottom` und `margin-left` steuern.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Gib der blauen Box einen `margin` von `40px` an ihrer oberen und linken Seite, aber nur `20px` an ihrer unteren und rechten Seite.
|
||||
|
||||
# --hints--
|
||||
|
||||
Deine `blue-box`-Klasse sollte der oberen Seite der Elemente `40px` `margin` zuweisen.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
Deine `blue-box`-Klasse sollte der rechten Seite der Elemente `20px` `margin` zuweisen.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
Deine `blue-box`-Klasse sollte der unteren Seite der Elemente `20px` `margin` zuweisen.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
Deine `blue-box`-Klasse sollte der linken Seite der Elemente `40px` `margin` zuweisen.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: Füge jeder Seite eines Elements einen andere Innenabstand hinzu
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
dashedName: add-different-padding-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Manchmal möchtest du ein Element so anpassen, dass es auf jeder seiner Seiten unterschiedlich viel `padding` hat.
|
||||
|
||||
CSS erlaubt es, das `padding` mit folgenden Eigenschaften für jede Seite individuell festzulegen: `padding-top`, `padding-right`, `padding-bottom` und `padding-left`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Gib der blauen Box ein `padding` von `40px` oben und links, aber nur `20px` auf der unteren und rechten Seite.
|
||||
|
||||
# --hints--
|
||||
|
||||
Deine `blue-box` Klasse sollte der oberen Seite der Elemente `40px` `padding` zuweisen.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
Deine `blue-box` Klasse sollte der rechten Seite der Elemente `20px` `padding` zuweisen.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
Deine `blue-box` Klasse sollte der unteren Seite der Elemente `20px` `padding` zuweisen.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
Deine `blue-box` Klasse sollte der linken Seite der Elemente `40px` `padding` zuweisen.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user