diff --git a/challenges/01-front-end-development-certification/html5-and-css.json b/challenges/01-front-end-development-certification/html5-and-css.json index 5486673055..ca93c5f5a8 100644 --- a/challenges/01-front-end-development-certification/html5-and-css.json +++ b/challenges/01-front-end-development-certification/html5-and-css.json @@ -18,13 +18,17 @@ ], "namePtBR": "Diga Olá aos Elementos HTML", "descriptionDe": [ - "Willkommen bei der ersten Programmier-Challenge von Free Code Camp! Klicke auf den folgenden Button für weitere Instruktionen.", - "Sehr gut. Jetzt kannst du den Rest der Instruktionen für diese Challenge lesen.", - "Mithilfe des eingebauten Text Editors kannst du den Code bearbeiten.", - "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML Element", - "Die meisten HTML Elemente haben eine öffnende Auszeichnung (Tag) und eine sich schließende. Öffnende Tags sehen so aus: <h1>. Schließende Tags so: </h1>. Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags in dem Slash besteht, das bei schließenden Tags auf die sich öffnende spitze Klammer folgt.", - "Sobald du eine Challenge abgeschlossen hast und alle Tests erfolgreich sind, wird der Button \"Go to my next challenge\" aktiv. Klicke auf diesen – oder drücke Steuerung (Control) und gleichzeitig Enter – um zur nächsten Challenge zu gehen.", - "Um den Button \"Go to my next challenge\" dieser Lektion zu aktivieren, ändere den Inhalt des h1 Tags von \"Hello\" zu \"Hello World\"." + "Willkommen bei der ersten Programmier-Challenge von Free Code Camp!", + "Mithilfe des eingebauten text editor kannst du den code bearbeiten.", + "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML element", + "Die meisten HTML Elemente haben einen opening tag und einen closing tag.", + "Öffnende Tags sehen so aus:", + "<h1>", + "Schließende Tags so:", + "</h1>", + "Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, das schließende Tags ein Slash nach der sich öffnenden spitzen Klammer folgt.", + "Jede Challenge hat Tests die du jederzeit starten kannst indem du den \"Run tests\" Button drückst. Wenn alle Tests bestehen kannst du mit der nächsten Challenge fortfahren.", + "Um den Test dieser Challenge zu bestehen, ändere den Text deines h1 Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button." ], "title": "Say Hello to HTML Elements", "description": [ @@ -61,7 +65,7 @@ "Cada desafío tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Run tests\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafío.", "Para pasar la prueba en este desafío, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"." ], - "titleDe": "Waypoint: Begrüße die HTML Elemente", + "titleDe": "Begrüße die HTML Elemente", "challengeType": 0 }, { @@ -76,10 +80,11 @@ ], "namePtBR": "Cabeçalho com o Elemento h2", "descriptionDe": [ - "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht.", + "In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:", + "\"Ein", "Das eingetragene h2 Element wird ein h2 Element auf der Website erzeugen.", - "Dieses Element sagt dem Browser, wie der darin enthaltene Text gerendert wird.", - "h2 Elemente sind ein wenig kleiner als h2 Elemente. Es gibt auch h3, h4, h5 und h6 Elemente." + "Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. h1 Elemente werden oft für Hauptüberschriften verwendet, während h2 Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch h3, h4, h5 und h6 Elemente die verschiedene und neue Bereiche kennzeichnen.", + "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht." ], "title": "Headline with the h2 Element", "description": [ @@ -108,7 +113,7 @@ "Los elementos h2 son ligeramente más pequeños que los elementos h1. También hay elementos h3, h4, h5 y h6", "Agrega una etiqueta h2 que diga \"CatPhotoApp\" para crear un segundo elemento HTML debajo de tu elemento h1 \"Hello World\"." ], - "titleDe": "Waypoint: Überschrift mit dem h2 Element", + "titleDe": "Überschrift mit dem h2 Element", "challengeType": 0 }, { @@ -121,9 +126,10 @@ ], "namePtBR": "Informe com o Elemento Parágrafo", "descriptionDe": [ - "Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein.", - "p Elemente sind das bevorzugte Element für normalen Paragraphen-Text auf einer Website. P ist die Abkürzung für \"Paragraph\".", - "Du kannst ein p Element so erzeugen: <p>Ich bin ein p Element!</p>" + "p Elemente sind das bevorzugte Element für normale Paragraphentexte auf einer Website. P ist die Abkürzung für \"Paragraph\".", + "Du kannst ein p Element so erzeugen:", + "<p>Ich bin ein p Element!</p>", + "Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein." ], "title": "Inform with the Paragraph Element", "description": [ @@ -149,7 +155,7 @@ "<p>¡Soy una etiqueta p!</p>", "Crea un elemento p debajo de tu elemento h2, y ponle el texto \"Hello Paragraph\"." ], - "titleDe": "Waypoint: Informiere mit dem Paragraph Element", + "titleDe": "Informiere mit dem Paragraph Element", "challengeType": 0 }, { @@ -162,10 +168,10 @@ ], "namePtBR": "Descomente o HTML", "descriptionDe": [ - "Entkommentiere deine h1, h2 und p Elemente.", "Kommentieren erlaubt dir Kommentare innerhalb des Codes zu hinterlassen, ohne diesen selbst zu beeinflussen.", "Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.", - "Du kannst einen Kommentar mit <!-- starten und ihn mit --> wieder beenden." + "Du kannst einen Kommentar mit <!-- starten und ihn mit --> wieder beenden.", + "Entkommentiere deine h1, h2 und p Elemente." ], "title": "Uncomment HTML", "description": [ @@ -197,7 +203,7 @@ "Puedes comenzar un comentario con <!-- y terminar de comentar con -->", "Quita el comentario a los elementos h1, h2 y p" ], - "titleDe": "Waypoint: HTML entkommentieren", + "titleDe": "HTML entkommentieren", "challengeType": 0 }, { @@ -209,9 +215,9 @@ ], "namePtBR": "Comente o HTML", "descriptionDe": [ - "Kommentiere die Elemente h1 und p aus, aber lasse dein h2 Element unkommentiert.", - "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden kannst.", - "Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen." + "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden werden.", + "Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen.", + "Kommentiere die h1 und p Elemente aus, aber lasse dein h2 Element unkommentiert." ], "title": "Comment out HTML", "description": [ @@ -241,7 +247,7 @@ "Aquí necesitarás terminar el comentario antes que comience el elemento h2.", "Comenta el elemento h1 y el elemento p, pero deja sin comentar el elemento h2" ], - "titleDe": "Waypoint: HTML auskommentieren", + "titleDe": "HTML auskommentieren", "challengeType": 0 }, { @@ -254,11 +260,10 @@ ], "namePtBR": "Preencha Espaços com Texto de Espaço Reservado", "descriptionDe": [ - "Ersetze den Text in deinem p Element mit den ersten Wörtern des zur Verfügung gestellten \"Kitty Ipsum\" Textes.", - "Webentwickler nutzen für gewöhnlich \"Lorem Ipsum\" Text als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.", + "Webentwickler nutzen für gewöhnlich \"Lorem Ipsum Text\" als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.", "\"Lorem Ipsum\" Text wurde seit dem 16. Jahrhundert von Schriftsetzern als Platzhalter verwendet. Und diese Tradition setzt sich im Web fort.", - "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber \"Kitty Ipsum\" nutzen!", - "Hier sind die ersten paar Wörter von \"Kitty Ipsum\", die du kopieren und an die richtige Stelle einfügen kannst: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber kitty ipsum text nutzen.", + "Ersetze den Text in deinem p Element mit den ersten Wörtern des \"Kitty Ipsum\" Textes: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "title": "Fill in the Blank with Placeholder Text", "description": [ @@ -285,7 +290,7 @@ "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos un texto llamado Kitty Ipsum!", "Reemplaza el texto dentro de tu elemento p con las primeras palabras de este texto kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], - "titleDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text", + "titleDe": "Fülle die Lücken mit Platzhalter-Text", "challengeType": 0 }, { @@ -297,9 +302,9 @@ ], "namePtBR": "Apague Elementos HTML", "descriptionDe": [ - "Lösche die Elemente h1, damit wir etwas Ordnung schaffen.", - "Unser Smartphone hat nicht sehr viel vertikalen Raum.", - "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp bauen können." + "Unser Smartphone hat nicht sehr viel vertikalen Platz.", + "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp entwickeln können.", + "Lösche die Elemente h1, damit wir etwas Ordnung schaffen." ], "title": "Delete HTML Elements", "description": [ @@ -326,7 +331,7 @@ "Eliminemos los elementos innecesarios para que empecemos a construir nuestra CatPhotoApp.", "Borra el elemento h1 para simplificar nuestra vista." ], - "titleDe": "Waypoint: Entferne HTML Elemente", + "titleDe": "Entferne HTML Elemente", "challengeType": 0 }, { @@ -341,9 +346,12 @@ ], "namePtBR": "Substitua a Cor do Texto", "descriptionDe": [ - "Ändere den Style des h2 Elements, damit die Textfarbe Rot ist.", - "Wir können das bewerkstelligen, indem wir den \"style\" des h2 Elements ändern.", - "So könntest du die Textfarbe des h2 Elements in Blau ändern: <h2 style=\"color: blue\">CatPhotoApp</h2>" + "Lass uns jetzt die Farbe von unserem Text ändern.", + "Wir können das bewerkstelligen, indem wir den style des h2 Elements ändern.", + "Der Style, der zuständig für die Textfarbe eines Elements ist, ist der \"color\" Style.", + "So könntest du die Textfarbe des h2 Elements in Blau ändern:", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "Ändere den Style des h2 Elements, damit die Textfarbe rot (\"red\") ist." ], "title": "Change the Color of Text", "description": [ @@ -372,7 +380,7 @@ "<h2 style=\"color: blue\">CatPhotoApp</h2>", "Cambia el estilo del elemento h2 de manera que el color de su texto sea rojo." ], - "titleDe": "Waypoint: Ändere die Farbe des Textes", + "titleDe": "Ändere die Farbe des Textes", "challengeType": 0 }, { @@ -391,13 +399,15 @@ ], "namePtBR": "Use Seletores CSS para Estilizar Elementos", "descriptionDe": [ - "Lösche das Style Attribute deines h2 Elements und erstelle stattdessen ein CSS style Element. Füge das notwendige CSS hinzu, um alle h2 Elemente Blau zu färben.", - "CSS liefert dir hunderte Attribute oder \"attributes\" um HTML Elemente auf deiner Seite zu gestalten.", - "Mit <h2 style=\"color: red\">CatPhotoApp</h2> hast du dem einzelnen h2 Element einen sogenannten \"inline style\" gegeben.", - "Das ist ein Weg, um Elemente zu gestalten. Es ist aber besser, Cascading Style Sheets (CSS) zu benutzen.", - "Erstelle über deinem Code ein style Element: <style></style>", - "Innerhalb des Style Elements kannst du einen CSS Selektor oder \"selector\" für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente Rot färben willst, schreibst du: <style>h2 {color: red;}</style>", - "Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) um jeden Style setzen solltest. Außerdem sollten deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon." + "CSS liefert dir hunderte Attribute oder properties um HTML Elemente auf deiner Seite zu gestalten.", + "Mit <h2 style=\"color: red\">CatPhotoApp</h2> hast du dem einzelnen h2 Element einen sogenannten inline style gegeben.", + "Das ist ein Weg, um Elemente zu gestalten. Es ist aber besser CSS, was für Cascading Style Sheets steht, zu benutzen.", + "Erstelle über deinem Code ein style Element:", + "
<style>
</style>
", + "Innerhalb des Style Elements kannst du einen CSS selector für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente rot färben willst, schreibst du:", + "
<style>
  h2 {color: red;}
</style>
", + "Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) um jeden Style setzen musst. Außerdem musst du sichergehen, dass deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon.", + "Lösche das Style Attribute deines h2 Elements und erstelle stattdessen ein CSS style Element. Füge das notwendige CSS hinzu, um alle h2 Elemente Blau zu färben." ], "title": "Use CSS Selectors to Style Elements", "description": [ @@ -436,7 +446,7 @@ "Fíjate que es importante tener llaves de apertura y de cierre ({ y }) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento esté entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento.", "Borra el atributo style de tu elemento h2 y a cambio escribe un elemento style CSS. Agrega el CSS necesario para hacer todos los elementos h2 de color azul." ], - "titleDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten", + "titleDe": "Nutze CSS Selektoren um Elemente zu stylen", "challengeType": 0 }, { @@ -458,14 +468,15 @@ ], "namePtBR": "Use Classes CSS para Estilizar Elementos", "descriptionDe": [ - "Erstelle eine CSS Klasse namens \"red-text\" und füge sie zu deinem h2 Element hinzu.", "Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.", "So sieht eine CSS Klasse aus:", - "\"Ein", - "Du siehst, dass wir die CSS Klasse \"blue-text\" innerhalb von <style> geschrieben haben.", - "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <h2 class=\"blue-text\">CatPhotoApp</h2>", - "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", - "Anstatt ein neues style Element zu erstellen, versuche die h2 Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen." + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", + "Du siehst, dass wir die CSS Klasse blue-text innerhalb von <style> geschrieben haben.", + "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginnen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", + "Ändere deinen h2 Selektor innerhalb deines style Elements zu .red-text und ändere den Farbwert von blue zu red.", + "Gib deinem h2 Element das class Attribut mit dem Wert 'red-text'." ], "title": "Use a CSS Class to Style an Element", "description": [ @@ -509,7 +520,7 @@ "Dentro de tu elemento style, cambia el selector h2 por .red-text y cambia el valor del color de blue a red.", "Dale a tu elemento h2 el atributo class con el valor de 'red-text'." ], - "titleDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten", + "titleDe": "Nutze eine CSS Klasse um ein Element zu gestalten", "challengeType": 0 }, { @@ -526,9 +537,12 @@ ], "namePtBR": "Estilize Múltiplos Elementos com uma Classe CSS", "descriptionDe": [ - "Füge den h2 und p Elementen die Klasse \"red-text\" hinzu.", "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.", - "Du weißt, es gehört ein Punkt vor CSS Klassen: .red-text { color: blue; }. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <h2 class=\"blue-text\">CatPhotoApp<h2>" + "Vergiss nicht dass CSS Klassenselektoren einen Punkt am Anfang brauchen:", + "
.blue-text {
  color: blue;
}
", + "Aber Klassen-Deklarationen brauchen keinen Punkt:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Füge die red-text Klasse deinem h2 und p Element hinzu." ], "title": "Style Multiple Elements with a CSS Class", "description": [ @@ -566,7 +580,7 @@ "<h2 class=\"blue-text\">CatPhotoApp<h2>", "Aplica la clase red-text a tus elementos h2 y p" ], - "titleDe": "Waypoint: Gestalte mehrere Elemente mit einer CSS Klasse", + "titleDe": "Gestalte mehrere Elemente mit einer CSS Klasse", "challengeType": 0 }, { @@ -581,10 +595,12 @@ ], "namePtBR": "Mude o Tamanho da Fonte de um Elemento", "descriptionDe": [ - "Erstelle ein zweites p Element. Ändere dann innerhalb deines <style> Elements die Schriftgröße oder \"font-size\" von allen p Elementen auf 16 Pixel.", - "Schriftgröße wird von dem CSS Attribut \"font-size\" kontrolliert: h1 { font-size: 30px; }", - "Zuerst erstellst du ein zweites p Element mit dem folgenden Kitty Ipsum Text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Versuche nun beiden p Elementen die Schriftgröße von 16 Pixeln (16px) zu geben. Du kannst das innerhalb des selben <style> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben." + "Schriftgröße wird von dem CSS Attribut font-size kontrolliert:", + "
h1 {
  font-size: 30px;
}
", + "Erstelle ein zweites p Element mit dem folgenden Kitty Ipsum Text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Erstelle dann innerhalb deines <style> Elements, das auch deine red-text Klasse enthält, einen Eintrag für p Elemente und setzte font-size auf 16 Pixel (16px).", + "Notiz
Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen.", + "Füge bitte auch kein Klassenattribute zu deinem neuen p Element hinzu." ], "title": "Change the Font Size of an Element", "description": [ @@ -623,7 +639,7 @@ "Nota
Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío.", "Además, no agregues ningún atributo de clase a tu elemento p." ], - "titleDe": "Waypoint: Ändere die Schriftgröße eines Elements", + "titleDe": "Ändere die Schriftgröße eines Elements", "challengeType": 0 }, { @@ -638,9 +654,10 @@ ], "namePtBR": "Defina a Fonte para um Elemento", "descriptionDe": [ - "Definiere für alle p Elemente die Schriftart \"Monospace\".", - "Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.", - "Wenn du zum Beispiel deinem h2 Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: h2 { font-family: Sans-serif; }" + "Du kannst einem Element mit font-family eine Schriftart zuweisen.", + "Wenn du zum Beispiel deinem h2 Element die Schriftart Sans-serif zuweisen willst, kannst du das mit dem folgenden CSS tun:", + "
h2 {
  font-family: Sans-serif;
}
", + "Definiere für alle p Elemente die Schriftart Monospace." ], "title": "Set the Font Family of an Element", "description": [ @@ -676,7 +693,7 @@ "
h2 {
  font-family: Sans-serif;
}
", "Haz que todos tus elementos p utilicen el tipo de letra Monospace." ], - "titleDe": "Waypoint: Definiere die Schriftart eines Elements", + "titleDe": "Definiere die Schriftart eines Elements", "challengeType": 0 }, { @@ -690,11 +707,12 @@ ], "namePtBR": "Importe uma Fonte a Partir do Google Fonts", "descriptionDe": [ - "Füge dem h2 Element die Schriftart oder font-family \"Lobster\" hinzu.", - "Zuerst musst du Google Fonts in dein HTML einbinden, um auf \"Lobster\" zugreifen zu können.", - "Kopiere den folgenden Code und füge diesen in deinen Editor über dem style Element ein:", + "Lass uns jetzt eine Google Font importieren und verwenden. (Beachte dass du diese Challenge überspringen musst, falls Google in deinem Land blockiert wird)", + "Zuerst musst du einen call (Anfrage) an Google machen um um auf Lobster zugreifen und in dein HMTL einbinden zu können.", + "Kopiere den folgenden Code und füge diesen in deinen Editor oben ein:", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", - "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen." + "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen.", + "Füge dem h2 Element die Schriftart oder font-family Lobster hinzu." ], "title": "Import a Google Font", "description": [ @@ -737,7 +755,7 @@ "Ahora puedes establecer Lobster como valor de font-family de tu elemento h2.", "Aplica el tipo de letra (font-family) Lobster a tu elemento h2." ], - "titleDe": "Waypoint: Importiere eine Google Font", + "titleDe": "Importiere eine Google Font", "challengeType": 0 }, { @@ -753,11 +771,11 @@ ], "namePtBR": "Especifique como as Fontes Devem se Degradar", "descriptionDe": [ - "Füge allen h2 Elementen die Schriftart \"Lobster\" hinzu und definiere \"Monospace\" als Ersatzschrift, wenn \"Lobster\" nicht verfügbar ist.", - "Du kannst \"Lobster\" als Schriftart deines h2 Elements belassen, aber gleichzeitig dafür sorgen, dass eine alternative Schrift geladen wird, wenn \"Lobster\" nicht zur Verfügung steht.", - "Wenn du zum Beispiel einem Element die Schriftart \"Helvetica\" geben möchtest, aber gleichzeitig die alternative Schrift \"Sans-Serif\" laden willst, wenn \"Helvetica\" nicht verfügbar ist, kannst du diesen CSS Style verwenden: p { font-family: Helvetica, Sans-Serif; }", - "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem h2 Element gleichzeitig die Schriftart \"Lobster\" und als Alternative \"Monospace\" zu geben.", - "Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird." + "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem Monospace, Serif und Sans-Serif.", + "Falls eine Font nicht verfügbar ist kannst du dem Browser sagen was er stattdessen verwenden soll.", + "Wenn du zum Beispiel einem Element die Schriftart Helvetica geben möchtest, aber gleichzeitig als Alertnative die Schrift Sans-Serif laden willst, falls Helvetica nicht verfügbar ist, kannst du diesen CSS Style verwenden:", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Kommentiere jetzt den Aufruf an Google Fonts aus, sodass Lobster nicht zur Verfügung steht. Beachte, wie nun alternativ die Schriftart Monospace geladen wird." ], "title": "Specify How Fonts Should Degrade", "description": [ @@ -804,7 +822,7 @@ "
p {
  font-family: Helvetica, Sans-Serif;
}
", "Ahora pon en forma de comentario tu llamada a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Nota cómo se degrada al tipo Monospace." ], - "titleDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten", + "titleDe": "Spezifiziere die Rangfolge von Schriftarten", "challengeType": 0 }, { @@ -819,10 +837,12 @@ ], "namePtBR": "Adicione Imagens em sua Página Web", "descriptionDe": [ - "Nutze ein img Element um das Bild https://bit.ly/fcc-relaxing-cat einzufügen.", "Du kannst img Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das src Attribut.", - "Ein Beispiel dafür wäre <img src=\"www.bild-quelle.com/bild.jpg\"/>. Beachte, dass img Elemente in den meisten Fällen selbstschließend sind.", - "Versuche es mit diesem Bild: https://bit.ly/fcc-relaxing-cat" + "Ein Beispiel dafür wäre:", + "<img src=\"https://www.deine-bild-quelle.com/dein-bild.jpg\">", + "Beachte dass in den meisten Fällen img Elemente selbstschließend sind.", + "Versuche es mit diesem Bild:", + "https://bit.ly/fcc-relaxing-cat" ], "title": "Add Images to your Website", "description": [ @@ -869,7 +889,7 @@ "Prueba con esta imagen:", "https://bit.ly/fcc-relaxing-cat" ], - "titleDe": "Waypoint: Füge Bilder zu deiner Website hinzu", + "titleDe": "Füge Bilder zu deiner Website hinzu", "challengeType": 0 }, { @@ -886,9 +906,11 @@ ], "namePtBR": "Dê um Tamanho para suas Imagens", "descriptionDe": [ + "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel px um die Größe zu definieren.", + "Wenn wir also die CSS Klasse larger-image erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir:", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", "Erstelle eine Klasse mit dem Namen smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.", - "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel (px) um die Größe zu definieren.", - "Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <style> .larger-image { width: 500px; } </style>" + "Notiz
Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen." ], "title": "Size your Images", "description": [ @@ -935,7 +957,7 @@ "Crea una clase llamada smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho.", "Nota
Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío." ], - "titleDe": "Waypoint: Skaliere deine Bilder", + "titleDe": "Skaliere deine Bilder", "challengeType": 0 }, { @@ -956,9 +978,12 @@ ], "namePtBR": "Adicione Bordas ao Redor de seus Elementos", "descriptionDe": [ - "Erstelle die Klasse \"thick-green-border\", welche einen 10 Pixel dicken, grünen Rahmen mit dem Style \"solid\" um ein HTML Element setzt. Füge diese Klasse zu deinem Katzenfoto hinzu.", - "CSS Rahmen haben Attribute wie Style, Color und Width.", - "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>" + "CSS Rahmen haben Attribute wie style, color und width", + "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "Erstelle die Klasse thick-green-border, welche einen 10 Pixel dicken, grünen Rahmen mit dem Style solid um ein HTML Element setzt. Füge diese Klasse deinem Katzenfoto hinzu.", + "Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im class Attribut trennst. Zum Beispiel:", + "<img class=\"class1 class2\">" ], "title": "Add Borders Around your Elements", "description": [ @@ -1014,7 +1039,7 @@ "Recuerda que puedes aplicar clases múltiples a un elemento separando cada clase con un espacio dentro del atributo class. Por ejemplo:", "<img class=\"clase1 clase2\">" ], - "titleDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu", + "titleDe": "Füge Rahmen zu deinen Elementen hinzu", "challengeType": 0 }, { @@ -1026,9 +1051,9 @@ ], "namePtBR": "Insira Bordas Arredondadas com o Border Radius", "descriptionDe": [ - "Gib deinem Katzenbild einen border-radius von 10 Pixeln.", - "Das Bild hat nun spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", - "Du kannst einen border-radius mit Pixeln deklarieren. Das beeinflusst die Rundung der Ecken. Füge dieses Attribut zu deiner thick-green-border Klasse hinzu und setze es auf 10 Pixel." + "Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", + "Du kannst einen border-radius mit Pixeln deklarieren. Gib deinem Katzenfoto einen border-radius von 10px.", + "Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen border-radius zu der .thick-green-border oder .smaller-image Klasse hinzufügen." ], "title": "Add Rounded Corners with a Border Radius", "description": [ @@ -1081,7 +1106,7 @@ "Puedes especificar border-radius usando pixeles. Dale a tu foto del gato un border-radius de 10px.", "Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar border-radius ya sea a la clase .thick-green-border o a la clase .smaller-image." ], - "titleDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu", + "titleDe": "Füge abgerundete Ecken mit Border Radius hinzu", "challengeType": 0 }, { @@ -1092,8 +1117,8 @@ ], "namePtBR": "Deixe as Imagens Circulares com o Border Radius", "descriptionDe": [ - "Gib deinem Katzenfoto einen border-radius von 50 %.", - "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen." + "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen.", + "Gib deinem Katzenfoto einen border-radius von 50%." ], "title": "Make Circular Images with a Border Radius", "description": [ @@ -1145,7 +1170,7 @@ "Además de pixeles, puedes especificar un border-radius usando porcentajes.", "Dale a tu foto del gato un border-radius de 50%." ], - "titleDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius", + "titleDe": "Erstelle runde Bilder mit einem Border Radius", "challengeType": 0 }, { @@ -1160,10 +1185,12 @@ ], "namePtBR": "Ligue Páginas Externas com o Elemento Âncora", "descriptionDe": [ - "Erstelle ein a Element oder \"Anker Element\", das auf http://freecatphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.", + "a Elemente, auch bekannt als anchor (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verlinken.", "So sieht ein a Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.", - "\"Ein", - "Hier ist ein Beispiel: <p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" + "\"Eine", + "Hier ist ein Beispiel:", + "<p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zu Free Code Camp</a> dem du folgen kannst.</p>", + "Erstelle ein a Element, das auf http://freecatphotoapp.com verlinkt und den \"cat photos\" als anchor text (Link-Text) beinhaltet." ], "title": "Link to External Pages with Anchor Elements", "description": [ @@ -1224,7 +1251,7 @@ "<p>Aquí está un <a href=\"https://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla \"fotos de gatos\"." ], - "titleDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen", + "titleDe": "Verlinke externe Seiten mit Anker Elementen", "challengeType": 0 }, { @@ -1239,9 +1266,12 @@ ], "namePtBR": "Aninhe o Elemento Âncora no Interior de um Parágrafo", "descriptionDe": [ - "Jetzt umschließe dein a Element mit einem p Element und dem Text \"click here for cat photos\". Nur \"cat photos\" soll ein Link ein – der Rest normaler Text.", - "Hier ist nochmal ein Beispiel für ein a Element: \"Ein", - "So könnte es aussehen: <p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" + "Hier ist nochmal ein Beispiel für ein a Element:", + "\"Eine", + "Hier ist ein Beispiel:", + "<p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zu Free Code Camp</a> dem du folgen kannst.</p>", + "Nesting bedeuted ein Element innerhalb eines anderen Elements zu schreiben", + "Jetzt umschließe dein a Element mit einem neuen p Element (direkt nach dem bereits existierenden h2 Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text." ], "title": "Nest an Anchor Element within a Paragraph", "description": [ @@ -1309,7 +1339,7 @@ "Anidamiento simplemente significa poner un elemento dentro de otro elemento.", "Ahora anida el elemento a existente dentro de un nuevo elemento p (justo después del elemento h2 que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." ], - "titleDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", + "titleDe": "Umschließe ein Anker Element mit einem Paragraphen", "challengeType": 0 }, { @@ -1321,10 +1351,9 @@ ], "namePtBR": "Crie Links Inativos com o Símbolo Cerquilha", "descriptionDe": [ - "Nutze das Hash Symbol (#) um deine a Elemente zu toten Links zu machen.", "Manchmal wirst du a Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.", - "Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir noch behandeln.", - "Ersetze den Inhalt des href Attributs deines a Elements mit einem Hash Symbol um einen toten Link zu erzeugen." + "Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir später noch behandeln.", + "Ersetze den Inhalt des href Attributs deines a Elements mit einem #, auch bekannt als Hash Symbol, um einen toten Link zu erzeugen." ], "title": "Make Dead Links using the Hash Symbol", "description": [ @@ -1379,7 +1408,7 @@ "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, lo cual aprenderemos más adelante.", "Reemplaza el atributo href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto." ], - "titleDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol", + "titleDe": "Erstelle tote Links mit dem Hash Symbol", "challengeType": 0 }, { @@ -1392,10 +1421,10 @@ ], "namePtBR": "Transforme uma Imagem em um Link", "descriptionDe": [ - "Umschließe dein img Element mit einem a Element als toten Link.", "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.", - "Umschließe nun dein Bild mit einem a Element. Hier ist ein Beispiel: <a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a>", - "Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.", + "Umschließe dein Bild mit einem a Element. Hier ist ein Beispiel:", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", + "Vergewissere dich, dass du ein # innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.", "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link." ], "title": "Turn an Image into a Link", @@ -1457,7 +1486,7 @@ "Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.", "Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ." ], - "titleDe": "Waypoint: Verlinke ein Bild", + "titleDe": "Verlinke ein Bild", "challengeType": 0 }, { @@ -1471,11 +1500,11 @@ ], "namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo", "descriptionDe": [ - "Füge zu unserem Katzen-Bild ein alt Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu.", - "alt Attribute – auch \"Alt Text\" genannt – werden vom Browser angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.", + "alt Attribute – auch alt text genannt – werden von Browsern angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.", "Kurz gesagt: Jedes Bild sollte ein alt Attribut beinhalten!", - "alt Attribute sind nützlich um Personen – und Web Crawlers wie Google – zu sagen was in einem Foto abgebildet wird. Das ist extrem wichtig, damit blinde oder visuell eingeschränkte Menschen den Inhalt der Website verstehen.", - "Du kannst das alt Attribut direkt in das Img Element einfügen: <img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/>" + "Du kannst das alt Attribut direkt in das Img Element einfügen:", + "<img src=\"www.deine-bild-quelle.com/dein-bild.jpg\" alt=\"dein alt Text\">", + "Füge zu unserem Katzen-Bild ein alt Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu." ], "title": "Add Alt Text to an Image for Accessibility", "description": [ @@ -1534,7 +1563,7 @@ "<img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\">", "Añade un atributo alt con el texto A cute orange cat lying on its back a nuestra foto del gato." ], - "titleDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu", + "titleDe": "Füge Alt Text für mehr Barrierefreiheit hinzu", "challengeType": 0 }, { @@ -1552,10 +1581,12 @@ ], "namePtBR": "Crie uma Lista Não Ordenada com Marcadores", "descriptionDe": [ - "Ersetze deine p Elemente mit drei Dingen, die Katzen lieben – in einer ungeordneten Liste.", - "HTML hat ein spezielles Element zum Erstellen von ungeordneten Listen.", - "ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", - "Als Beispiel: <ul><li>Milch</li><li>Käse</li></ul> würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen." + "HTML hat ein spezielles Element zum Erstellen von unordered lists (ungeordneten Listen).", + "Ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", + "Zum Beispiel:", + "
<ul>
  <li>Milch</li>
  <li>Käse</li>
</ul>
", + "würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen.", + "Entferne die letzten zwei p Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite" ], "title": "Create a Bulleted Unordered List", "description": [ @@ -1619,7 +1650,7 @@ "creará una lista con viñetas y con elementos \"leche\" y \"queso\".", "Elimina los dos últimos elementos p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman." ], - "titleDe": "Waypoint: Erstelle eine ungeordnete Liste", + "titleDe": "Erstelle eine ungeordnete Liste", "challengeType": 0 }, { @@ -1637,10 +1668,12 @@ ], "namePtBR": "Crie uma Lista Ordenada", "descriptionDe": [ - "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen.", - "HTML beinhaltet ein spezielles Element für geordnete Listen.", + "HTML beinhaltet ein spezielles Element für ordered lists (geordnete Listen).", "Geordnete Listen starten mit einem <ol> Element. Dann enthalten sie eine gewisse Anzahl an <li> Elementen.", - "Als beispiel: <ol><li>hydrogen</li><li>Helium</li></ol> würde eine nummerierte Liste aus \"Hydrogen\" und \"Helium\" erstellen." + "Zum Beispiel:", + "
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
", + "würde eine nummerierte Liste mit \"Garfield\" und \"Sylvester\" erstellen.", + "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen." ], "title": "Create an Ordered List", "description": [ @@ -1712,7 +1745,7 @@ "creará una lista numerada con \"Garfield\" y \"Sylvester\".", "Crea una lista ordenada de los 3 cosas que más odian los gatos." ], - "titleDe": "Waypoint: Erstelle eine geordnete Liste", + "titleDe": "Erstelle eine geordnete Liste", "challengeType": 0 }, { @@ -1727,9 +1760,12 @@ ], "namePtBR": "Crie um Campo de Texto", "descriptionDe": [ - "Nun erstellen wir ein Web Formular. Erstelle ein Textfeld unter deinen Listen.", - "Eingabefelder sind ein guter Weg, um Daten von Nutzern zu erhalten.", - "So kannst du eines erstellen: <input type=\"text\">. Beachte, dass input Elemente selbstschließend sind." + "Nun erstellen wir ein Web Formular.", + "Eingabefelder sind eine bewährte Möglichkeit um Daten von Usern zu erhalten.", + "So kannst du eines erstellen:", + "<input type=\"text\">", + "Beachte, dass input Elemente selbstschließend sind.", + "Erstelle ein input Element des Typ (\"type\") text unter deinen Listen." ], "title": "Create a Text Field", "description": [ @@ -1800,7 +1836,7 @@ "Ten en cuenta que los elementos input son de cierre automático.", "Crea un elemento input de tipo text debajo de tus listas." ], - "titleDe": "Waypoint: Erstelle ein Textfeld", + "titleDe": "Erstelle ein Textfeld", "challengeType": 0 }, { @@ -1813,9 +1849,10 @@ ], "namePtBR": "Adicione Texto Indicativo a um Campo de Texto", "descriptionDe": [ - "Setze bei deinem input Element den Wert für placeholder auf \"cat photo URL\".", - "Platzhalter erscheinen in input Feldern, bevor der Nutzer etwas eingibt.", - "Du kannst Platzhalter auf folgende Weise erstellen: <input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">" + "Platzhaltertexte erscheinen in deinen input Feldern, bevor der Nutzer etwas eingibt.", + "Du kannst Platzhalter auf folgende Weise erstellen:", + "<input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">", + "Setze bei deinem input Element den Wert für placeholder auf \"cat photo URL\"." ], "title": "Add Placeholder Text to a Text Field", "description": [ @@ -1885,7 +1922,7 @@ "<input type=\"text\" placeholder=\"este es un texto de relleno\">", "Establece el valor del texto de relleno de tu campo de texto como \"cat photo URL\"." ], - "titleDe": "Waypoint: Füge Platzhalter zu einem Textfeld hinzu", + "titleDe": "Füge Platzhalter zu einem Textfeld hinzu", "challengeType": 0 }, { @@ -1898,9 +1935,10 @@ ], "namePtBR": "Crie um Elemento de Formulário", "descriptionDe": [ - "Umschließe dein Textfeld mit einem form Element. Füge anschließend das Attribut action=\"/submit-cat-photo\" hinzu.", "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein form Element bestimmst.", - "Zum Beispiel: <form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>" + "Zum Beispiel:", + "<form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>", + "Umschließe dein Textfeld mit einem form Element. Füge anschließend das Attribut action=\"/submit-cat-photo\" hinzu." ], "title": "Create a Form Element", "description": [ @@ -1970,7 +2008,7 @@ "<form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"></form>", "Anida tu campo de texto en un elemento form. Agrega el atributo action=\"/submit-cat-photo\" a este elemento de formulario." ], - "titleDe": "Waypoint: Erstelle ein Formular", + "titleDe": "Erstelle ein Formular", "challengeType": 0 }, { @@ -1983,9 +2021,10 @@ ], "namePtBR": "Inclua um Botão de Enviar a um Formulário", "descriptionDe": [ - "Füge eine Schaltfläche zum Senden mit dem Typ \"submit\" und \"Submit\" als Text zu deinem form Element hinzu.", - "Lass uns nun eine Schaltfläche zum Senden zu deinem Formlar hinzufügen. Durch einen Klick auf diese Schaltfläche werden die Daten des Formulars an die URL gesendet, welche du in dem action Attribut deines Formulars angegeben hast.", - "Hier ist ein Beispiel einer solchen Schaltfläche: <button type=\"submit\">Diese Schaltfläche überträgt die Daten des Formulars.</button>" + "Lass uns nun einen submit Button hinzufügen. Durch einen Klick auf diesen Button werden die Daten des Formulars an die URL gesendet, welche du in dem action Attribut deines Formulars angegeben hast.", + "Hier ist ein Beispiel einen solchen Button:", + "<button type=\"submit\">Dieser Button überträgt die Daten des Formulars.</button>", + "Füge einen Button zum Senden mit dem Typ submit und \"Submit\" als Text zu deinem form Element hinzu." ], "title": "Add a Submit Button to a Form", "description": [ @@ -2058,7 +2097,7 @@ "<button type=\" submit\">este botón envía el formulario</botón>", "Agrega un botón de enviar a tu elemento form con el tipo submit y con el texto \"Submit\"." ], - "titleDe": "Waypoint: Füge eine Schaltfläche zum Senden hinzu", + "titleDe": "Füge eine Button zum Senden hinzu", "challengeType": 0 }, { @@ -2071,9 +2110,11 @@ ], "namePtBR": "Use HTML5 para Especificar Campos Obrigatórios", "descriptionDe": [ + "Du kannst bestimmte Felder eines Formulars zu Pflichtfeldern erklären. Damit ist es deinen Usern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.", + "Um zum Beispiel ein Textfeld zum Pflichtfeld zu erklären, kannst du einfach ein required innerhalb deines input Elements hinzufügen: <input type=\"text\" required>", "Mache aus deinem input Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.", - "Du kannst bestimmte Felder eines Formulars als Pflichtfelder deklarieren. Damit ist es deinen Nutzern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.", - "Um zum Beispiel ein Textfeld als Pflichtfeld zu deklarieren, kannst du einfach ein \"required\" innerhalb deines input Elements hinzufügen: <input type=\"text\" required>" + "Probier dann dein Formular ohne einen Text abzuschicken. Siehst du wie dein HTML5 Formular dich darauf hinweißt dass das Feld verpflichtend ist?", + "Beachte: dieses Feld funktioniert nicht in Safari." ], "title": "Use HTML5 to Require a Field", "description": [ @@ -2146,7 +2187,7 @@ "Luego, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?", "Nota: Este campo no funciona en Safari." ], - "titleDe": "Waypoint: Nutze HTML5 um ein Pflichtfeld zu erstellen", + "titleDe": "Nutze HTML5 um ein Pflichtfeld zu erstellen", "challengeType": 0 }, { @@ -2162,12 +2203,13 @@ ], "namePtBR": "Crie um Conjunto de Botões de Seleção", "descriptionDe": [ - "Füge ein paar Optionsfelder zu deinem Formular hinzu. Jedes Optionsfeld sollte innerhalb seines eigenen label Elements liegen. Sie sollten außerdem ein name Attribut teilen. Eines davon sollte die Option \"indoor\" und das andere die Option \"outdoor\" haben.", - "Du kannst Optionsfelder für Fragen verwenden, auf die der Nutzer nur eine Antwort geben soll.", - "Optionsfelder sind lediglich ein weiterer Typ von input Elementen.", - "Jedes deiner Optionsfelder sollte innerhalb des eigenen label Elements liegen.", - "Alle Optionsfelder mit Bezug zueinander sollten das gleiche name Attribut teilen.", - "Ein Beispiel eines Optionsfeldes: <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>" + "Du kannst Optionsfelder, radio buttons, für Fragen verwenden, auf die der Nutzer nur eine Antwort geben soll.", + "Radiobuttons sind lediglich ein weiterer Typ von input Elementen.", + "Jeder deiner Radiobuttons sollte innerhalb eines eigenen label Elements liegen.", + "Alle Radiobuttons mit Bezug zueinander sollten das gleiche name Attribut teilen.", + "Ein Beispiel eines Radiobuttons:", + "<label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>", + "Füge ein Paar Radiobuttons zu deinem Formular hinzu. Einer sollte die Option indoor und der andere die Option outdoor haben." ], "title": "Create a Set of Radio Buttons", "description": [ @@ -2249,7 +2291,7 @@ "<label><input type=\"radio\" name=\"dentro-fuera\"> Dentro</label>", "Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de indoor y el otro debe tener la opción outdoor. " ], - "titleDe": "Waypoint: Erstelle ein paar Optionsfelder", + "titleDe": "Erstelle ein Set von Radiobuttons", "challengeType": 0 }, { @@ -2265,9 +2307,13 @@ ], "namePtBR": "Crie um Conjunto de Caixas de Seleção", "descriptionDe": [ - "Füge deinem Formular drei Kontrollkästchen hinzu. Jedes dieser Elemente sollte innerhalb seines eigenen label Elements stehen. Alle sollten das gleiche name Attribut \"personality\" teilen.", - "Formulare nutzen Kontrollkästchen meistens für Fragen, die mehrerer Antworten bedürfen.", - "Als Beispiel: <label><input type=\"checkbox\" name=\"personality\"> liebevoll</label>" + "Formulare nutzen Kontrollkästchen, checkboxes meistens für Fragen, die mehrerer Antworten bedürfen.", + "Checkboxen sind eine Art von input Elementen", + "Jedes deiner Checkboxen sollte innerhalb eines eigenen label Elements liegen.", + "Alle zusammengehörende Checkboxes sollten das gleiche name Attribut haben.", + "Hier ist ein Beispiel für eine Checkbox:", + "<label><input type=\"checkbox\" name=\"personality\"> Loving</label>", + "Füge deinem Formular drei Checkboxen hinzu. Jedes dieser Elemente sollte innerhalb seines eigenen label Elements liegen. Alle sollten das gleiche name Attribut personality teilen." ], "title": "Create a Set of Checkboxes", "description": [ @@ -2349,7 +2395,7 @@ "<label><input type=\"checkbox\" name=\"personalidad\"> Cariñoso</label>", "Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento label. Las tres deben tener personality como su atributo name." ], - "titleDe": "Waypoint: Erstelle ein paar Kontrollkästchen", + "titleDe": "Erstelle ein paar Checkboxen", "challengeType": 0 }, { @@ -2362,9 +2408,10 @@ ], "namePtBR": "Deixe Botões e Caixas de Seleção Ativados por Padrão", "descriptionDe": [ - "Stelle sicher, dass jeweilse dein erstes Optionsfeld und Kontrollkästchen standardmäßig markiert sind.", - "Das kannst du erreichen, indem beiden das Attribut checked beigefügt wird.", - "Um das zu bewerkstelligen, füge einfach \"checked\" innerhalb eines Eingabefeldes hinzu. Als Beispiel: <input type=\"radio\" name=\"test-name\" checked>" + "Du kannst Checkboxen und Radiobuttons standardmäßig markiert machen, indem du das checked Attribut verwendest.", + "Das kannst du erreichen, indem du das Word \"checked\" innerhalb des Inputelements eingefügst. Zum Beispiel so:", + "<input type=\"radio\" name=\"test-name\" checked>", + "Stelle sicher, dass jeweils deine ersten Radiobuttons und Checkboxen standardmäßig markiert sind." ], "title": "Check Radio Buttons and Checkboxes by Default", "description": [ @@ -2441,7 +2488,7 @@ "<input type=\"radio\" name=\"nombre-de-prueba\" checked>", "Establece como marcados por omisión el primero de tus botones de radio y la primera casilla de verificación." ], - "titleDe": "Waypoint: Standardmäßig ausgewählte Optionsfelder und Kontrollkästchen", + "titleDe": "Standardmäßig ausgewählte Radiobuttons und Checkboxen", "challengeType": 0 }, { @@ -2455,11 +2502,11 @@ ], "namePtBR": "Aninhe Muitos Elementos Dentro de um só Elemento Div", "descriptionDe": [ - "Umschließe deine \"Thins cats love\" und \"Things cats hate\" Listen mit einem div Element.", "Das div Element oder \"Division\" ist ein allgemeiner Container für andere Elemente.", - "Dieses Element wird von allen HTML Elementen wahrscheinlich am häufigsten verwendet. Es ist nützlich um die CSS Stile der eigenen Klasse an die enthaltenen Elemente zu vererben.", + "Das div Element ist wahrscheinlich das am häufigsten verwendete HTML Element. Es ist nützlich um die CSS Stile der eigenen Klasse an die enthaltenen Elemente zu vererben.", "Wie jedes andere Element – das sich nicht selbst schließt – kannst du ein div Element mit <div> öffnen und mit </div> wieder schließen.", - "Versuche deine öffnende div Auszeichnung überhalb des p Elements von \"Things cats love\" und das schließende div unterhalb der schließenden ol Auszeichnung zu platzieren. Damit befinden sich beide Listen innerhalb eines div" + "Versuche dein öffnendes div Element überhalb des p Elements von \"Things cats love\" und das schließende div unterhalb des schließenden ol Elements zu platzieren. Damit befinden sich beide Listen innerhalb eines div", + "Umschließe deine \"Thins cats love\" und \"Things cats hate\" Listen mit einem einzelnen div Element." ], "title": "Nest Many Elements within a Single Div Element", "description": [ @@ -2541,7 +2588,7 @@ "Trata de poner tu etiqueta de apertura div por encima de elemento p \"Things cat love\", y tu etiqueta de cierre de div después de tu etiqueta de cierre de ol, para que cada una de tus listas estén dentro de un div. ", "Anida tus listas \"Things cats love\" y \"Things cats hate\" dentro de un solo elemento div." ], - "titleDe": "Waypoint: Umschließe viele Elemente mit einem einzigen Div Element", + "titleDe": "Umschließe viele Elemente mit einem einzigen Div Element", "challengeType": 0 }, { @@ -2633,6 +2680,13 @@ "Por ejemplo, si quieres que el color de fondo de un elemento sea verde (green), dentro de tu elemento style pondrías:", "
.green-background {
  background-color: green;
}
", "Crea una clase llamada gray-background con la propiedad background-color en gris (gray). Asigna esta clase a tu elemento div ." + ], + "titleDe": "Gib einem Div Element eine Hintergrundfarbe", + "descriptionDe": [ + "Du kannst die Hintergrundfarbe von einem Element mit dem background-color Attribut setzen", + "Wenn du zum Beispiel die Hintergrundfarbe von einem Element green machen willst, schreibe dies in dein style Element:", + "
.green-background {
  background-color: green;
}
", + "Erstelle eine Klasse namens gray-background mit der background-color grau (gray). Füge diese Klasse deinem div Element hinzu" ] }, { @@ -2730,6 +2784,15 @@ "He aquí un ejemplo de cómo le das la identificación cat-photo-app a tu elemento h2:", "<h2 id=\"cat-photo-app\">", "Dale a tu elemento form la id cat-photo-form." + ], + "titleDe": "Setze die ID von einem Element", + "descriptionDe": [ + "Zusätzlich zu Klassen, kann jedes HTML Element auch ein id Attribut haben.", + "Es hat mehrere Vorteile id Attribute zu verwenden und du wirst mehr über diese erfahren wenn du anfängst mit jQuery zu arbeiten.", + "id Attribute sollten eindeutig sein. Browser werden das nicht durchsetzen, aber es ist eine weit verbreitete und erprobte Herangehensweise. Also gib bitte nie mehr als einem Element das gleiche id Attribut.", + "Hier ist ein Beispiel wie du deinem h2 Element die Id cat-photo-app gibst:", + "<h2 id=\"cat-photo-app\">", + "Gib deinem form Element die Id cat-photo-form." ] }, { @@ -2830,6 +2893,14 @@ "
#cat-photo-element {
  background-color: green;
}
", "Ten en cuenta que dentro de tu elemento style, siempre referencias clases poniendo un . en frente de sus nombres. Y siempre referencias identificaciones poniendo un # frente a sus nombres. ", "Trata de darle a tu formulario, que ahora tiene el atributo id en cat-photo-form, un fondo verde." + ], + "titleDe": "Benutze ein ID Attribute um ein Element zu stylen", + "descriptionDe": [ + "Eine coole Eigenschaft von id Attributen ist, dass du sie, genauso wie Klassen, mit CSS stylen kannst.", + "Hier ist ein Beispiel wie du einem Element mit dem id Attribut cat-photo-element eine grüne Hintergrundfarbe geben kannst. In deinem style Element:", + "
#cat-photo-element {
  background-color: green;
}
", + "Beachte, dass du in deinem style Element Klassen immer mit einem . vor deren Namen ansprichst. Ids sprichst du immer mit # vor deren Namen an.", + "Versuche deinem Formular, das jetzt das id Attribut cat-photo-form hat, einen grünen Hintergrund zu geben." ] }, { @@ -2845,10 +2916,12 @@ ], "namePtBR": "Ajuste o Preenchimento de um Elemento", "descriptionDe": [ - "Die nächsten Wegpunkte werden dir drei wichtige Aspekte von Raum – und Zeit! – bei HTML Elementen näher bringen: padding, margin und border. Das mit der Zeit war ein Scherz. Gleiche nun den Innenabstand – padding – deiner grünen Box dem der roten Box an.", + "Lass uns jetzt mal unsere Katzenfoto App kurz beiseite legen um mehr über HTML Styling zu lernen", + "Du hast vielleicht schon bemerkt, dass alle HTML Elemente im Prinzip kleine Rechtecke sind.", + "Drei wichtige CSS-Eigenschaften beeinflussen den Platz den jedes HTML Element umgibt: padding, margin und border.", "padding kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – border", "Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr padding hat als die grüne Box.", - "Wenn du den Innenabstand der grünen Box – also padding – erhöhst, wird sich die Entfernung zwischen dem Text \"padding\" und dem Rahmen darum erhöhen." + "Ändere das padding der grünen Box um es an die rote Box anzugleichen." ], "title": "Adjusting the Padding of an Element", "description": [ @@ -2910,7 +2983,7 @@ "Cuando aumentes el relleno de la caja verde, aumentará la distancia entre el texto padding y el borde alrededor de este.", "Cambia el relleno (padding) de la caja verde para que coincida con el de tu cuadro rojo." ], - "titleDe": "Wegpunkt: Justiere den Innenabstand eines Elements", + "titleDe": "Justiere den Innenabstand eines Elements", "challengeType": 0 }, { @@ -2923,10 +2996,10 @@ ], "namePtBR": "Ajuste a Margem de um Elemento", "descriptionDe": [ - "Gleiche den Außenabstand – margin der grünen Box dem der roten Box an.", - "margin kontrolliert den Abstand zwischen dem Rahmen eines Elements und den benachbarten Elementen.", - "Die grüne und die rote Box befinden sich beide erneut innerhalb der gelben Box. Beachte, dass die rote Box mehr margin aufweist als ihr Erzfeind – die grüne Box.", - "Wenn du den Außenabstand – margin – der grünen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern." + "margin kontrolliert den Abstand zwischen dem Rahmen - border - eines Elements und den benachbarten Elementen.", + "In diesem Beispiel sehen wir die grüne und die rote Box die sich beide innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr margin aufweist als die grüne Box, wodurch sie kleiner wirkt.", + "Wenn du den Außenabstand – margin – der grünen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern.", + "Gleiche den Außenabstand – margin der grünen Box dem der roten Box an." ], "title": "Adjust the Margin of an Element", "description": [ @@ -2984,7 +3057,7 @@ "Cuando aumentes el margen (margin) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.", "Cambia el margen (margin) de la caja verde para que coincida con el de la caja roja." ], - "titleDe": "Waypoint: Passe den Außenabstand eines Elements an", + "titleDe": "Passe den Außenabstand eines Elements an", "challengeType": 0 }, { @@ -2997,10 +3070,10 @@ ], "namePtBR": "Adicione uma Margem Negativa a um Elemento", "descriptionDe": [ - "Passe den Außenabstand – margin – der grünen Box mit einem negativen Wert an, damit sie die gelbe Box horizontal ausfüllt.", - "margin kontrolliert den Abstand zwischen dem Rahmen eines Elements und den benachbarten Elementen.", - "Wenn du dem Außenabstand eines Elements einen negativen Wert zuweist, wird das Element größer.", - "Versuche den Außenabstand auf einen negativen Wert wie bei der roten Box zu setzen." + "margin kontrolliert den Abstand zwischen dem Rahmen - border - eines Elements und den benachbarten Elementen.", + "Wenn du dem Außenabstand - margin - eines Elements einen negativen Wert zuweist, wird das Element größer.", + "Versuche den Außenabstand - margin - auf einen negativen Wert, wie bei der roten Box, zu setzen.", + "Ändere den Außenabstand – margin – der grünen Box auf -15px, damit sie die gelbe Box horizontal ausfüllt." ], "title": "Add a Negative Margin to an Element", "description": [ @@ -3057,7 +3130,7 @@ "Trata de establecer el margen (margin) a un valor negativo como el de la caja roja.", "Cambia el margen (margin) de la caja verde a -15px, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea." ], - "titleDe": "Waypoint: Füge einem Element negativen Außenabstand hinzu", + "titleDe": "Füge einem Element negativen Außenabstand hinzu", "challengeType": 0 }, { @@ -3069,9 +3142,9 @@ ], "namePtBR": "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento", "descriptionDe": [ - "Verleihe der grünen Box einen Innenabstand – padding – von 40 Pixeln auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite.", - "Manchmal wirst du einem Element unterschiedlichen Innenabstand – also padding – auf jeder Seite geben wollen.", - "CSS erlaubt dir den Innenabstand eines Elements auf allen Seiten einzeln mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu steuern." + "Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also padding – geben wollen.", + "CSS erlaubt dir den Innenabstand - padding - eines Elements auf allen Seiten einzeln mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu steuern.", + "Verleihe der grünen Box einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." ], "title": "Add Different Padding to Each Side of an Element", "description": [ @@ -3130,7 +3203,7 @@ "CSS te permite controlar el relleno (padding) de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades padding-top, padding-right, padding-bottom y padding-left. ", "Da a la caja verde un relleno (padding) de 40px en las partes superior e izquierda, pero sólo 20px en sus partes inferior y derecha." ], - "titleDe": "Wegpunkt: Gib jeder Seite eines Elements unterschiedlichen Innenabstand", + "titleDe": "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand", "challengeType": 0 }, { @@ -3142,8 +3215,9 @@ ], "namePtBR": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento", "descriptionDe": [ - "Gib der grünen Box einen Außenabstand – also margin – von 40 Pixeln auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite.", - "CSS erlaubt dir ebenfalls den Außenabstand auf jeder Seite einzeln mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu steuern." + "Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - margin - geben wollen.", + "CSS erlaubt dir ebenfalls den Außenabstand - margin - eines Elements auf jeder Seite einzeln mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu steuern.", + "Gib der grünen Box einen Außenabstand – margin – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." ], "title": "Add Different Margins to Each Side of an Element", "description": [ @@ -3202,7 +3276,7 @@ "CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades margin-top, margin-right, margin-bottom y margin-left. ", "Da a la caja verde un margen (margin) de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho." ], - "titleDe": "Wegpunkt: Füge jeder Seite eines Elements unterschiedlichen Außenabstand hinzu", + "titleDe": "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu", "challengeType": 0 }, { @@ -3215,9 +3289,10 @@ ], "namePtBR": "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento", "descriptionDe": [ - "Gib der Klasse \".green-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – padding – von 40 Pixeln auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite.", - "Anstatt die Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu verwenden, kannst du sie alle in einer Zeile schreiben: padding: 10px 20px 10px 20px;", - "Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bedeuten exakt das selbe wie die seitenspezifischen Anweisungen." + "Anstatt die Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu verwenden, kannst du sie alle in einer Zeile schreiben:", + "padding: 10px 20px 10px 20px;", + "Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.", + "Gib der Klasse \".green-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." ], "title": "Use Clockwise Notation to Specify the Padding of an Element", "description": [ @@ -3275,7 +3350,7 @@ "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.", "Usa la notación en sentido horario para dar a la clase \".green-box\" un relleno de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." ], - "titleDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen", + "titleDe": "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen", "challengeType": 0 }, { @@ -3289,9 +3364,11 @@ ], "namePtBR": "Use Notação em Sentido Horário para Especificar a Margem de um Elemento", "descriptionDe": [ - "Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also margin. Nutze die Notation im Uhrzeigersinn – auch Clockwise Notation genannt – um einem Element 40 Pixel Außenabstand auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite zu verleihen.", - "Anstatt die Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu verwenden, kannst du alle in eine Zeile schreiben: margin: 10px 20px 10px 20px;", - "Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie meinen exakt das gleiche wie die seitenspezifischen Anweisungen." + "Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also margin.", + "Anstatt die Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu verwenden, kannst du alle in eine Zeile schreiben:", + "margin: 10px 20px 10px 20px;", + "Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.", + "Nutze die Notation im Uhrzeigersinn – auch Clockwise Notation genannt – um dem Element mit der Klasse green-box 40px Außenabstand auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite zu verleihen." ], "title": "Use Clockwise Notation to Specify the Margin of an Element", "description": [ @@ -3351,7 +3428,7 @@ "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.", "Usa notación en sentido horario para dar al elemento con la clase green-box un margen de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." ], - "titleDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen", + "titleDe": "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen", "challengeType": 0 }, { @@ -3392,6 +3469,14 @@ "Podemos demostrar que el elemento (body) existe aquí, dandole un color de fondo (background-color) negro.", "Podemos hacer esto añadiendo lo siguiente a nuestro elemento style:", "
body {
  background-color: black;
}
" + ], + "titleDe": "Style das HTML Body Element", + "descriptionDe": [ + "Lass uns jetzt frisch beginnen und über CSS Vererbung reden.", + "Jede HTML Seite hat ein body Element.", + "Wir können sehen dass es das body Element gibt wenn wir ihm eine schwarze (black) background-color geben", + "Das bewerkstelligen wir indem wir folgendes unserem style Element hinzufügen:", + "
body {
  background-color: black;
}
" ] }, { @@ -3438,6 +3523,14 @@ "En primer lugar, crea un elemento h1 con el texto Hello World", "Después, vamos a darle a todos los elementos de tu página el color verde (green) añadiendo color: green; a la declaración de estilo de tu elemento body.", "Por último, da a tu elemento body el tipo de letra Monospace añadiendo font-family: Monospace; a la declaración del estilo de tu elemento body." + ], + "titleDe": "Erbe Styles vom Body Element", + "descriptionDe": [ + "Jetzt haben wir bewiesen dass jede HTML Seite ein body Element besitzt und dass dieses body Element ebenfalls mit CSS gestylt werden kann.", + "Vergiss nicht, dass du dein body Element wie jedes andere HTML Element stylen kannst und dass alle anderen Elemente von deinem body Element Styles erben werden.", + "Erstelle zuerst ein h1 Element mit dem Text Hello World", + "Dann gib allen Elementen auf deiner Seite die Farbe green indem du color:green; deinen body Element Styles hinzufügst.", + "Gib deinem body Element abschließend die Schriftart Monospace indem du font-family: Monospace; deinen body Element Styles hinzufügst." ] }, { @@ -3482,6 +3575,12 @@ "Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (override) nuestra clase la propiedad CSS color: green del elemento body?", "Crea una clase CSS llamada pink-text que le da a un elemento el color rosado.", "Ponle a tu elemento h1 la clase de pink-text." + ], + "titleDe": "Ziehe einen Style einem Anderen vor", + "descriptionDe": [ + "Manchmal werden deine HTML Elemente mehrere Styles erhalten die sich gegenseitig widersprechen.", + "Zum Beispiel könnte dein h1 Element nicht gleichzeitig grün und pink sein.", + "Schauen wir uns an was passiert wenn wir eine Klasse erstellen die Text pink macht und dann einem Element hinzufügen. Wird unsere Klasse die color:green; Eigenschaft unseres body Elements überschreiben - override - ?" ] }, { @@ -3539,6 +3638,17 @@ "class=\"clase1 clase2\"", "Nota: No importa el orden en que las clases aparecen en el HTML.", "Sin embargo, el orden de las declaraciones class en la sección <style> sí son importantes. La segunda declaración siempre precederá a la primera. Debido a que .blue-text es declarada después, esta anula los atributos de .pink-text" + ], + "titleDe": "Überschreibe Styles mit nachträglichen CSS", + "descriptionDe": [ + "Unsere \"pink-text\" Klasse hat unsere CSS Angaben des body Elements überschrieben!", + "Wir haben gerade bewiesen, dass unsere Klassen das CSS des body Elements überschreiben. Die logische nächste Frage ist also was wir tun können um unsere pink-text Klasse zu überschreiben?", + "Erstelle eine weitere CSS Klasse namens blue-text, die deinem Element eine blaue Farbe gibt. Stelle sicher dass sie unter deiner pink-text Klassen-Deklaration steht.", + "Füge die blue-text Klasse deinem h1 Element zusätzlich zur pink-text Klasse hinzu und schau welche gewinnt.", + "Einem HTML Element mehrere Klassen Attribute zu geben funktioniert mit einem Leerzeichen dazwischen:", + "class=\"class1 class2\"", + "Notiz: Es ist egal in welcher Reihenfolge die Klassen in einem HTML Element angeordnet sind.", + "Allerdings ist die Reihenfolge der class Deklarationen im <style> Abschnitt durchaus wichtig. Die zweite Deklaration wird immer Vorzug gegenüber der Ersten erhalten. Weil .blue-text als zweites deklariert wird, überschreibt es die Attribute von .pink-text" ] }, { @@ -3603,6 +3713,17 @@ "Crea una declaración CSS para tu identificación orange-text en tu elemento style. He aquí un ejemplo de como se ve esto: ", "
#brown-text {
  color: brown;
}
", "Nota: No importa si usted declara este css encima o debajo de la clase de texto de color rosa, ya atributo id siempre tendrá prioridad." + ], + "titleDe": "Überschreibe Klassen Deklarationen mit Styling von ID Attributen", + "descriptionDe": [ + "Wir haben gerade bewiesen, dass der Browser CSS von oben nach unten liest. Das bedeuted, dass im Falle eines Konflikts der Browser immer die letzte CSS Deklaration verwenden wird.", + "Aber damit sind wir noch nicht fertig. Es gibt andere Wege um CSS zu überschreiben. Erinnerst du dich an Id Attribute?", + "Überschreiben wir jetzt unsere pink-text und blue-text Klasse und machen unser h1 Element orange, indem wir dem h1 Element eine Id geben und diese dann stylen.", + "Gib deinem h1 Element das id Attribute orange-text. Vergiss nicht, Id Styles sehen so aus:", + "<h1 id=\"orange-text\">", + "Erstelle eine CSS Deklaration für deine orange-text Id in deinem style Element. Hier siehst du ein Beispiel wie sowas aussieht:", + "
#brown-text {
  color: brown;
}
", + "Notiz: Es ist egal ob du dies vor oder nach deiner \"pink-text\" Klasse schreibst, da Id Attribute immer bevorzugt werden." ] }, { @@ -3658,6 +3779,14 @@ "Utiliza un estilo en línea para tratar de hacer blanco nuestro elemento h1. Recuerda, los estilos en línea se ven así: ", "<h1 style=\"color: green\">", "Deja las clases blue-text y pink-text en tu elemento h1." + ], + "titleDe": "Überschreibe deine Klassen Deklarationen mit Inline Styles", + "descriptionDe": [ + "Wir haben also gesehen dass Id Deklarationen die von Klassen überschreiben, egal wo sie in deinem style Element CSS stehen.", + "Es gibt noch andere Wege CSS zu überschreiben. Erinnerst du dich an Inline Styles?", + "Benutze in-line style um dein h1 Element weiß zu machen. Vergiss nicht, Inline Styles sehen so aus:", + "<h1 style=\"color: green\">", + "Lasse die blue-text und pink-text Klassen auf deinem h1 Element." ] }, { @@ -3720,6 +3849,16 @@ "Vamos a añadir la palabra clave !important a tu declaración del color de pink-text para estar 100% seguros que tu elemento h1 será rosado.", "Un ejemplo de cómo hacer esto es:", "color: red !important;" + ], + "titleDe": "Überschreibe alle anderen Styles mit Important", + "descriptionDe": [ + "Juhu! Wir haben bewiesen dass Inline Styles alle CSS Deklarationen aus deinem style Element überschreiben.", + "Aber warte. Es gibt eine letzte Art CSS zu überschreiben. Dabei handelt es sich um die mächtigste Methode von allen. Aber bevor wir dazu kommen, sehen wir uns an warum du überhaupt CSS überschreiben wollen würdest.", + "In vielen Situationen wirst du sogenannte \"CSS libraries\" (CSS Bibliotheken) verwenden. Diese könnten versehentlich dein eigenes CSS überschreiben. Wenn du also absolut sicher sein musst dass ein Element einen bestimmten Style hat, kannst du !important verwenden.", + "Gehen wir zurück zu unserer pink-text Klassendeklaration. Wie du dich vielleicht erinnerst wurde unsere pink-text Klasse von darauffolgenden Klassen, Ids und Inline Styles überschrieben.", + "Füge das Schlüsselwort !important zu der Farbe deines \"pink-text\" Elements hinzu um 100% sicher zu gehen dass das h1 Element pink ist.", + "Hier ist ein Beispiel wie man das macht:", + "color: red !important;" ] }, { @@ -3757,6 +3896,13 @@ "El sistema Decimal se refiere al que nos permite representar cantidades empleando los dígitos del cero al nueve - los números que la gente usa en la vida cotidiana. El sistema Hexadecimal incluye estos 10 dígitos más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 dígitos posibles, en lugar de las 10 posibles que nos da nuestro sistema numérico normal en base 10. ", "Con CSS, utilizamos 6 dígitos hexadecimales para representar los colores. Por ejemplo, #000000 es el valor más bajo posible, y representa el color negro. ", "Reemplaza la palabra black en el color de fondo (background-color) de nuestro elemento body por su representación hexadecimal #000000" + ], + "titleDe": "Verwende hexadezimal Code für spezifische Farben", + "descriptionDe": [ + "Wusstest du dass es andere Möglichkeiten gibt Farben in CSS darzustellen? Eine dieser Möglichkeiten ist \"Hexadezimal Code\" genannt, oder kurz hex code.", + "Wir verwenden üblicherweise decimals (Dezimalen), oder Zehnersystem, das für jede Ziffer eine Symbol von 0 bis 9 verwendet. Hexadecimals (Hexadezimalzahlen oder hex) beruhen auf einer 16er Basis. Das bedeuted dass sie 16 verschiedene Symbole verwenden. Wie auch Dezimalzahlen, repräsentiern die Symbole \"0\"-\"9\" Null bis Neun. Dann allerdings geht es weiter mit A,B,C,D,E,F für die Zahlen 10-15. Alles in Allem kann eine einzige Ziffer, mit 0 bis F, in hexadecimal 16 mögliche Werte ausdrücken. Mehr Informationen über das Hexadezimalsystem kannst du hier finden.", + "In CSS können wir 6 Hexadezimalziffern verwenden um eine Farbe auszudrücken, je zwei für den Rot- (R), Grün (G)- und Blauanteil (B). #000000 ist zum Beispiel schwarz und der niedrigst mögliche Wert. Mehr Information über den RGB Farbraum findest du hier.", + "Ersetzte das Wort black in der Hintergrundfarbe deines body Elements mit dem hex code #000000." ] }, { @@ -3791,6 +3937,12 @@ "0 es el dígito más bajo en código hexadecimal, y representa una completa ausencia de color.", "F es el dígito más alto en código hexadecimal, y representa el máximo brillo posible.", "Volvamos blanco el color de fondo (background-color) de nuestro elemento body, cambiando su código hexadecimal por #FFFFFF" + ], + "titleDe": "Verwende Hexadezimal Code um Elemente Weiß zu färben", + "descriptionDe": [ + "0 ist die niedrigste Zahl in Hexadezimal Code und steht für die komplette Abwesenheit von Farbe.", + "F ist die höchste Zahl in Hexadezimal Code und steht für maximal mögliche Helligkeit.", + "Mach die Hintergrundfarbe deines body Element weiß indem du den Hexadezimal Code auf #FFFFFF änderst." ] }, { @@ -3831,6 +3983,14 @@ "Los códigos hexadecimales siguen el formato rojo-verde-azul (red-green-blue) o formato rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", "Así que para conseguir el rojo absolutamente más brillante, basta que uses F para el primer y segundo dígitos (el valor más alto posible) y 0 para el tercero, cuarto, quinto y sexto dígitos (el valor más bajo posible).", "Haz que el color de fondo (background-color) del elemento body sea rojo dándole el código hexadecimal #FF0000" + ], + "titleDe": "Verwende Hexadezimal Code um Elemente rot zu färben", + "descriptionDe": [ + "Du wunderst dich vielleicht warum wir 6 Ziffern verwenden um Farben darzustellen anstatt nur eine oder zwei. Die Antwort ist, dass uns 6 Ziffern eine enorme Vielfalt geben.", + "Wieviele Farben sind möglich? 16 Werte und 6 Positionen bedeuted dass wir 16 hoch 6, oder mehr als 16 Millionen mögliche Farben zur Verfügung haben.", + "Hexadezimal Code folgt der Rot-Grün-Blau, oder rgb, Schreibweise. Die ersten zwei Ziffern des Hexadezimal Code geben die Menge an Rot in der Farbe an. Die dritte und vierte Ziffer die Menge an Grün. Die fünfte und sechste die Menge an Blau.", + "Um also das absolut hellste Rot zu bekommen, würdest du F (der höchstmögliche Wert) für die erste und zweite und 0 (der niedrigstmögliche Wert) für die dritte, vierte, fünfte und sechste Ziffer verwenden.", + "Ändere die Hintergrundfarbe des body Elements zu Rot indem du ihm den Hexadezimal Code #FF0000 gibst." ] }, { @@ -3865,6 +4025,12 @@ "Recuerda que el código hexadecimal sigue el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul.", "Así que para conseguir el verde absoluto más brillante, sólo debes usar F en el tercer y cuarto dígitos (el valor más alto posible) y 0 para todos los otros dígitos (el valor más bajo posible). ", "Haz que el color de fondo (background-color) del elemento body sea verde, dándole el código hexadecimal #00FF00" + ], + "titleDe": "Verwende Hexadezimal Code um Elemente grün zu färben", + "descriptionDe": [ + "Vergiss nicht, hex code folgt der Rot-Grün-Blau, oder rgb, Schreibweise. Die ersten zwei Ziffern des Hexadezimal Code stehen für die Menge an Rot in der Farbe. Die dritte und vierte Ziffer stehen für die Menge an Grün. Die fünfte und sechste für die Menge an Blau.", + "Um also das absolut hellste Grün zu bekommen, musst du F (der größtmögliche Wert) für die dritte und vierte und 0 (der niedrigste Wert) für alle anderen Ziffern verwenden.", + "Mach die Hintergrundfarbe des body Elements grün indem du ihm den Hexadezimal Code #00FF00 gibst." ] }, { @@ -3899,6 +4065,12 @@ "Los códigos hexadecimales siguen el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", "Así que para conseguir el azul absoluto más brillante, utilizamos F para la quinta y sexta cifras (el valor más alto posible) y 0 para todos los otros dígitos (el valor más bajo posible ). ", "Haz que el color de fondo (background-color) del elemento body sea azul, dándole el código hexadecimal #0000FF" + ], + "titleDe": "Verwende Hexadezimal Code um Elemente blau zu färben", + "descriptionDe": [ + "Hexadezimal Code folgt der Rot-Grün-Blau, oder rgb, Schreibweise. Die ersten zwei Ziffern stehen für die Menge an Rot in der Farbe. Die dritte und vierte Ziffer repräsentiert die Menge an Grün. Die fünfte und sechste steht für die Menge an Blau.", + "Um also das hellste Blau zu bekommen, verwenden wir F (größtmöglicher Wert) für die fünfte und sechste und 0 (der niedrigste Wert) für alle anderen Ziffern.", + "Mach die Hintergrundfarbe des body Elements blau indem du den Hexadezimal Code mit dem Wert #0000FF verwendest." ] }, { @@ -3933,6 +4105,12 @@ "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", "Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.", "Haz que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" + ], + "titleDe": "Verwende Hexadezimal Code um Farben zu mischen", + "descriptionDe": [ + "Mit diesen drei puren Farben (Rot, Grün und Blau) können wir 16 Millionen andere Farben erzeugen.", + "Orange, zum Beispiel, ist pures Rot, gemischt mit ein bisschen Grün und keinem Blau", + "Gib dem body Element eine orange Hintergrundfarbe indem du den Hexadezimal Code #FFA500 verwendest." ] }, { @@ -3967,6 +4145,12 @@ "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", "También podemos crear diferentes tonos de gris mezclando uniformemente los tres colores.", "Haz que el color de fondo del elemento body sea gris, dándole el código hexadecimal #808080" + ], + "titleDe": "Verwende Hexadezimal Code um Elemente grau zu färben", + "descriptionDe": [ + "Mit diesen drei puren Farben (Rot, Grün und Blau) können wir 16 Millionen andere Farben erzeugen.", + "Wir können auch verschiedene Grautöne erzeugen indem wir alle drei Farben in gleichen Teilen mischen.", + "Gib dem body Element eine graue Hintergrundfarbe indem du den Hexadezimal Code #808080 verwendest." ] }, { @@ -3998,6 +4182,11 @@ "descriptionEs": [ "También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ", "Haz que el color de fondo del elemento body sea gris oscuro dandole el código hexadecimal #111111" + ], + "titleDe": "Verwende Hexadezimal Code für spezifische Grautöne", + "descriptionDe": [ + "Wir können auch andere Grautöne erzeugen indem wir alle drei Farben gleichmäßig mischen. Damit können wir uns an echtes Schwarz annähern.", + "Gib dem body Element eine dunkelgraue Hintergrundfarbe indem du den Hexadezimal Code #111111 verwendest." ] }, { @@ -4035,6 +4224,13 @@ "Por ejemplo, el rojo, que es #FF0000 en código hexadecimal, se puede abreviar a #F00. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ", "Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente el mismo color. ", "Adelante, intenta usar #F00 para volver rojo el color de fondo del elemento body." + ], + "titleDe": "Verwende abgekürzten Hexadezimal Code", + "descriptionDe": [ + "Viele Leute fühlen sich mit der Auswahl aus über 16 Millionen Farben überfordert. Außerdem ist es schwierig sich Hexadezimal Codes zu merken. Zum Glück kannst du sie abkürzen.", + "Rot, zum Beispiel, mit dem Hexadezimal Code von #FF0000 kannst du mit #F00 abkürzen. Das bedeuted eine Ziffer für Rot, eine für Grün und eine für Blau", + "Das reduziert die Gesamtsumme an möglichen Farben auf ungefähr 4.000. Aber Browser interpretieren #FF0000 und #F00 als exakt die gleiche Farbe.", + "Probiere #F00 aus um die Hintergrundfarbe des body Elements rot zu färben." ] }, { @@ -4084,6 +4280,18 @@ "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", "Si haces la matemática, 16 veces 16 es 256 valores totales. Así que rgb, que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal.", "Remplacemos el código hexadecimal del color de fondo de nuestro elemento body por el valor RGB para el negro: rgb(0, 0, 0)" + ], + "titleDe": "Verwende RGB Werte um Elemente zu färben", + "descriptionDe": [ + "Ein anderer Weg um Farben in CSS darzustellen ist rgb Werte zu verwenden.", + "Der RGB Wert für Schwarz sieht so aus:", + "rgb(0, 0, 0)", + "Der RGB Wert für Weiß sieht so aus:", + "rgb(255, 255, 255)", + "Anstatt sechs Hexadezimalziffern zu verwenden, legst du mit rgb die Helligkeit jeder einzelner Farbe mit einer Zahl zwischen 0 und 255 fest.", + "Wenn du nachrechnest, 16 mal 16 ist 256 Werte. Also hat rgb, das mit Null hochzuzählen beginnt, die gleiche Anzahl an möglichen Farben wie Hexadezimal Code.", + "Ersetzte jetzt den Hexadezimal Code der Hintergrundfarbe deines body Elements mit dem RGB Wert für Schwarz: rgb(0, 0, 0)" + ] }, { @@ -4127,6 +4335,15 @@ "rgb(255, 255, 255)", "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", "Cambia el color de fondo del elemento body del valor RGB para el negro al valor rgb para el blanco: rgb(255, 255, 255)" + ], + "titleDe": "Verwende RGB Werte um Elemente weiß zu färben", + "descriptionDe": [ + "Der RGB Wert für Schwarz sieht so aus:", + "rgb(0, 0, 0)", + "Der RGB Wert für Weiß sieht so aus:", + "rgb(255, 255, 255)", + "Anstatt sechs Hexadezimalziffern zu verwenden, legst du mit rgb die Helligkeit jeder einzelner Farbe mit einer Zahl zwischen 0 und 255 fest.", + "Ändere die Hintergrundfarbe des body Elements vom RGB Wert für Schwarz zum rgb Wert für Weiß: rgb(255, 255, 255)" ] }, { @@ -4161,6 +4378,12 @@ "Al igual que con el código hexadecimal, puedes representar diferentes colores en RGB mediante el uso de combinaciones de diferentes valores.", "Estos valores siguen el patrón de RGB: el primer número representa rojo, el segundo número representa el verde, y el tercer número representa azul.", "Cambia el color de fondo del elemento body al rojo usando su valor RGB: rgb(255, 0, 0)" + ], + "titleDe": "Verwende RGB um Elemente rot zu färben", + "descriptionDe": [ + "Wie auch beim Hexadezimal Code, kannst du verschiedene Farben in RGB durch die Kombination von verschiedenen Werten festlegen.", + "Diese Werte folgen dem Muster von RGB: die erste Zahl steht für Rot, die zweite für Grün und die dritte für Blau.", + "Ändere die Hintergrundfarbe des body ELements zum RGB Wert für Rot: rgb(255, 0, 0)" ] }, { @@ -4189,6 +4412,10 @@ "titleEs": "Usa RGB para colorear de verde los elementos", "descriptionEs": [ "Ahora cambia el color de fondo del elemento body a verde usando su valor RGB: rgb (0, 255, 0)" + ], + "titleDe": "Verwende RGB um Elemente grün zu färben", + "descriptionDe": [ + "Jetzt ändere die Hintergrundfarbe des body Elements zum rgb Wert von Grün: rgb(0, 255, 0)" ] }, { @@ -4217,6 +4444,10 @@ "titleEs": "Usa RGB para colorear de azul los elementos", "descriptionEs": [ "Cambia el color de fondo del elemento body a azul usando su valor RGB: rgb(0, 0, 255)" + ], + "titleDe": "Verwende RGB um Elemente Blau zu färben", + "descriptionDe": [ + "Ändere die Hintergrundfarbe des body Elements zum RGB Wert von Blau: rgb(0, 0, 255)" ] }, { @@ -4248,6 +4479,11 @@ "descriptionEs": [ "Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.", "Cambia el color de fondo del elemento body a anaranjado usando su valor RGB: rgb(255, 165, 0)" + ], + "titleDe": "Verwende RGB um Farben zu mischen", + "descriptionDe": [ + "Wie auch mit Hexadezimal Code, kannst du Farben in RGB mischen indem du Kombination von verschiedenen Werten nimmst.", + "Ändere die Hintergrundfarbe des body Elements zum RGB Wert von Orange: rgb(255, 165, 0)" ] } ]