diff --git a/seed/challenges/basic-html5-and-css.json b/seed/challenges/basic-html5-and-css.json index c90513cc28..143e92cab5 100644 --- a/seed/challenges/basic-html5-and-css.json +++ b/seed/challenges/basic-html5-and-css.json @@ -40,7 +40,17 @@ "Para activar el botón \"Ir a mi siguiente desafío\" de este ejercicio, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\"." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Begrüße die HTML Elemente", + "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\"." + ] }, { "id": "bad87fee1348bd9aedf0887a", @@ -77,7 +87,14 @@ "Los elementos h2 son ligeramente más pequeños que los elementos h1. También hay elementos h3, h4, h5 y h6." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Überschrift mit dem h2 Element", + "descriptionDe": [ + "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht.", + "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." + ] }, { "id": "bad87fee1348bd9aedf08801", @@ -112,7 +129,13 @@ "Tú puedes crear un elemento párrafo como éste: <p>I'm a p tag!</p>." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Informiere mit dem Paragraph Element", + "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>" + ] }, { "id": "bad87fee1348bd9aeaf08801", @@ -148,7 +171,14 @@ "Luego te encontrarás con otras etiquetas de elementos auto-cerrados." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Trenne Elemente visuell mit Zeilenumbrüchen", + "descriptionDe": [ + "Füge ein br Element zu deiner Seite hinzu, am besten zwischen zwei anderen Elementen.", + "br Elemente – auch Zeilenumbrüche oder \"line breaks\" genannt – können mit <br> erstellt werden.", + "Beachte, dass <br> keinen schließenden Tag hat. Es ist ein selbst schließendes oder \"self-closing\" Element.", + "Du wirst bald mehr selbstschließende Elemente kennenlernen." + ] }, { "id": "bad87fee1348bd9aedf08802", @@ -193,7 +223,14 @@ "Puedes comenzar un comentario con <!-- y terminar de comentar con -->." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: HTML entkommentieren", + "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." + ] }, { "id": "bad87fee1348bd9aedf08804", @@ -236,7 +273,13 @@ "Aquí necesitarás terminar el comentario antes que comience el elemento h2." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: HTML auskommentieren", + "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." + ] }, { "id": "bad87fee1348bd9aedf08833", @@ -278,7 +321,15 @@ "Aquí están las primeras palabras del texto Kitty Ipsum, que puedes copiar y pegar en la posición correcta: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text", + "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.", + "\"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." + ] }, { "id": "bad87fed1348bd9aedf08833", @@ -319,7 +370,13 @@ "Removamos los elementos innecesarios para que empecemos a construir nuestra CatPhotoApp." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Entferne HTML Elemente", + "descriptionDe": [ + "Lösche die Elemente h1 und br, 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." + ] }, { "id": "bad87fee1348bd9aedf08803", @@ -355,7 +412,13 @@ "Así es como podrías volver el color de texto de tu elemento h2 en azul: <h2 style=\"color: blue\">CatPhotoApp</h2>." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Ändere die Farbe des Textes", + "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>." + ] }, { "id": "bad87fee1348bd9aedf08805", @@ -400,7 +463,17 @@ "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." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten", + "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." + ] }, { "id": "bad87fee1348bd9aecf08806", @@ -442,7 +515,18 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten", + "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 Beispiel, wie Styles geschrieben werden. Das wird im Detail in den folgenden Zeilen beschrieben.", + "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." + ] }, { "id": "bad87fee1348bd9aefe08806", @@ -481,7 +565,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Gestalte mehrere Elemente mit einer CSS Klasse", + "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>." + ] }, { "id": "bad87fee1348bd9aedf08806", @@ -521,7 +611,14 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Ändere die Schriftgröße eines Elements", + "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." + ] }, { "id": "bad87fee1348bd9aede08807", @@ -562,7 +659,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Definiere die Schriftart eines Elements", + "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; }." + ] }, { "id": "bad87fee1348bd9aedf08807", @@ -608,7 +711,15 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Importiere eine Google Font", + "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:", + "<link href='http://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." + ] }, { "id": "bad87fee1348bd9aedf08808", @@ -658,7 +769,15 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten", + "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." + ] }, { "id": "bad87fee1348bd9aedf08809", @@ -715,7 +834,18 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Überschreibe Styles mit Important", + "descriptionDe": [ + "Erstelle eine \"urgently-red\" Klasse, welche einem Element die Schriftfarbe Rot verleiht, füge aber !important zur Klasse hinzu um sicherzustellen, dass die Farbe auch übernommen wird. Erstelle direkt unter deiner \"urgently-red\" Klasse eine weitere Klasse namens \"blue-text\", die einem Element die Schriftfarbe Blau gibt. Füge beide Klassen zu deinem h2 Element hinzu.", + "Du kannst mehrere Klassen zu einem Element hinzufügen, indem du sie mit einem Leerzeichen trennst: <h2 class='green-text giant-text'>Das wird ein großer grüner Text</h2>.", + "Ab und zu erhalten HTML Elemente ähnliche Informationen von verschiedenen CSS Klassen.", + "Wenn es einen solchen Konflikt gibt, wird der Browser die Styles verwenden, welche am Ende des CSS Dokuments stehen. Beachte, dass Inline Styles die höchste Priorität haben.", + "Es gibt einen Weg um sicherzustellen, dass ein bestimmter Style akzeptiert wird. Egal wo dieser sich befindet. Die Rede ist von !important.", + "Verwirrt? Hier ist die Hierarchie, in der Styles angewandt werden: !important schlägt alle anderen Styles und Inline Styles kommen vor Style Tag Deklarationen.", + "Ein Beispiel für CSS Styles, die !important verwenden: <style> .urgently-blue { color: blue !important; } </style>.", + "Jetzt stelle sicher, dass dein h2 Element die Farbe Rot erhält, ohne die \"blue-text\" Klasse zu entfernen, einen Inline Style anzuwenden oder die Reihenfolge der CSS Klassen zu verändern." + ] }, { "id": "bad87fee1348bd9aedf08812", @@ -764,7 +894,14 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Füge Bilder zu deiner Website hinzu", + "descriptionDe": [ + "Nutze ein img Element um das Bild http://bit.ly/fcc-kittens 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: http://bit.ly/fcc-kittens." + ] }, { "id": "bad87fee1348bd9acdf08812", @@ -814,7 +951,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Skaliere deine Bilder", + "descriptionDe": [ + "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>." + ] }, { "id": "bad87fee1348bd9bedf08813", @@ -871,7 +1014,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu", + "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>." + ] }, { "id": "bad87fee1348bd9aedf08814", @@ -931,7 +1080,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu", + "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." + ] }, { "id": "bad87fee1348bd9aedf08815", @@ -991,7 +1146,12 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius", + "descriptionDe": [ + "Gib deinem Katzenfoto einen border-radius von 50 %.", + "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen." + ] }, { "id": "bad87fee1348bd9aedf08816", @@ -1054,7 +1214,14 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen", + "descriptionDe": [ + "Erstelle ein a Element oder \"Anker Element\", das auf http://catphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.", + "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 Beispiel wie Anker Tags geschrieben werden.", + "Hier ist ein Beispiel: <p>Hier ist ein <a href='http://freecodecamp.com'> Link zum Free Code Camp</a> für dich zum Folgen.</p>." + ] }, { "id": "bad87fee1348bd9aede08817", @@ -1123,7 +1290,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", + "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 Beispiel wie Anker Tags geschrieben werden.", + "So könnte es aussehen: <p>Hier ist ein <a href='http://freecodecamp.com'> Link zum Free Code Camp</a> für dich zum Folgen.</p>" + ] }, { "id": "bad87fee1348bd9aedf08817", @@ -1186,7 +1359,14 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol", + "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." + ] }, { "id": "bad87fee1348bd9aedf08820", @@ -1252,7 +1432,15 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Verlinke ein Bild", + "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='http://bit.ly/fcc-kittens2'/></a>.", + "Vergewissere dich, dass du ein Hash Symbol (#) 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." + ] }, { "id": "bad87fee1348bd9aedf08818", @@ -1316,7 +1504,15 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu", + "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.", + "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.\"/>." + ] }, { "id": "bad87fee1348bd9aedf08827", @@ -1382,7 +1578,14 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle eine ungeordnete Liste", + "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." + ] }, { "id": "bad87fee1348bd9aedf08828", @@ -1455,7 +1658,14 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle eine geordnete Liste", + "descriptionDe": [ + "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen.", + "HTML beinhaltet ein spezielles Element für 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." + ] }, { "id": "bad87fee1348bd9aedf08829", @@ -1527,7 +1737,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle ein Textfeld", + "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." + ] }, { "id": "bad87fee1348bd9aedf08830", @@ -1601,7 +1817,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Füge Platzhalter zu einem Textfeld hinzu", + "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.'>." + ] }, { "id": "bad87fee1348bd9aede08830", @@ -1677,7 +1899,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle ein Formular", + "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>." + ] }, { "id": "bad87fee1348bd9aedd08830", @@ -1755,7 +1983,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Füge eine Schaltfläche zum Senden hinzu", + "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>." + ] }, { "id": "bad87fee1348bd9aedc08830", @@ -1831,7 +2065,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Nutze HTML5 um ein Pflichtfeld zu erstellen", + "descriptionDe": [ + "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>." + ] }, { "id": "bad87fee1348bd9aedf08834", @@ -1915,7 +2155,16 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle ein paar Optionsfelder", + "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>." + ] }, { "id": "bad87fee1348bd9aedf08835", @@ -1996,7 +2245,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle ein paar Kontrollkästchen", + "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>." + ] }, { "id": "bad87fee1348bd9aede18835", @@ -2076,7 +2331,12 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Strukturiere dein Formular mit Zeilenumbrüchen", + "descriptionDe": [ + "Schaffe ein wenig Ordnung in deinem Formular, indem du Zeilenumbrüche zwischen den Eingabefeldern verwendest.", + "Du weißt, Zeilenumbrüche können mit folgendem Code erstellt werden: <br>" + ] }, { "id": "bad87fee1348bd9aedd08835", @@ -2160,7 +2420,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Standardmäßig ausgewählte Optionsfelder und Kontrollkästchen", + "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>." + ] }, { "id": "bad87fee1348bd9aede08835", @@ -2249,7 +2515,15 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Umschließe viele Elemente mit einem einzigen Div Element", + "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.", + "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." + ] }, { "id": "bad87fee1348bd9aede07836", @@ -2336,7 +2610,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Gib dem Div Element einen farbigen Hintergrund", + "descriptionDe": [ + "Erstelle eine Klasse namens \"gray-background\" mit der Hintergrund-Farbe grau. Füge diese Klasse deinem div Element hinzu.", + "Du kannst die Hintergrund-Farbe eines Elements mit der Eigenschaft \"background-color\" bestimmen.", + "Willst du den Hintergrund eines Elements zum Beispiel grün – \"green\" – einfärben, kannst du .green-background { background-color: green; } innerhalb deines style Elements verwenden." + ] }, { "id": "bad88fee1348bd9aedf08825", @@ -2398,7 +2678,14 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Wegpunkt: Justiere den Innenabstand eines Elements", + "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.", + "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." + ] }, { "id": "bad87fee1348bd9aedf08822", @@ -2462,7 +2749,14 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Passe den Außenabstand eines Elements an", + "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." + ] }, { "id": "bad87fee1348bd9aedf08823", @@ -2525,7 +2819,14 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Füge einem Element negativen Außenabstand hinzu", + "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." + ] }, { "id": "bad87fee1348bd9aedf08824", @@ -2591,7 +2892,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Wegpunkt: Gib jeder Seite eines Elements unterschiedlichen Innenabstand", + "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." + ] }, { "id": "bad87fee1248bd9aedf08824", @@ -2657,7 +2964,12 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Wegpunkt: Füge jeder Seite eines Elements unterschiedlichen Außenabstand hinzu", + "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." + ] }, { "id": "bad87fee1348bd9aedf08826", @@ -2720,7 +3032,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen", + "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." + ] }, { "id": "bad87fee1348bd9aedf08726", @@ -2784,7 +3102,13 @@ "nameEs": "", "descriptionEs": [], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen", + "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." + ] } ] } diff --git a/seed/challenges/get-set-for-free-code-camp.json b/seed/challenges/get-set-for-free-code-camp.json index ff3c0b8f3f..a657759d08 100644 --- a/seed/challenges/get-set-for-free-code-camp.json +++ b/seed/challenges/get-set-for-free-code-camp.json @@ -38,7 +38,18 @@ "Ahora es el momento de ingresar a nuestra sala de chat. Dale click al botón de \"I've completed this challenge\" para continuar con el siguiente desafío." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Lerne wie Free Code Camp funktioniert", + "descriptionDe": [ + "Sieh dir das kurze Video an oder lies einfach diese Übersicht:", + "Willkommen im Free Code Camp. Wir sind eine Community aus eifrigen Personen, die Programmieren lernen, indem sie Projekte für gemeinnützige Organisationen umsetzen.", + "Programmieren zu lernen ist hart, weshalb wir diese Community ins Leben gerufen haben. Jeder, der motiviert bleiben kann, ist auch in der Lage Programmieren zu lernen. Und um motiviert zu bleiben, musst du nur:
  1. Freunde finden, die programmieren
  2. jeden Tag ein wenig programmieren
", + "All unsere Challenges sind
  1. kostenlos
  2. selbstbestimmt
  3. Browser-basiert
", + "Wir werden
  1. 200 Stunden mit Werkzeugen wie HTML, CSS, JavaScript, Node.js und Datenbanken arbeiten
  2. 600 Stunden Projekte umsetzen
  3. 800 Stunden komplette Lösungen für gemeinnützige Organisationen erstellen
", + "Am Ende werden wir
  1. gut im Programmieren sein
  2. ein Portfolio aus Anwendungen mit zufriedenen Nutzern vorweisen können
", + "Wenn du das Free Code Camp abgeschlossen hast, wirst du in der Lage sein einen Job in der Branche zu bekommen. Es gibt sehr viel mehr offene Stellen als fähige Programmierer, um sie zu besetzen.", + "Jetzt wird es Zeit unserem Chat beizutreten. Klicke auf \"I've completed this challenge\" um zur nächsten Challenge fortzufahren." + ] }, { "id": "bd7125d8c441eddfaeb5bd0f", @@ -85,7 +96,20 @@ "Para mantener a nuestra comunidad como un lugar de aprendizaje positivo y amigable, por favor lee y sigue nuestro Código de Conducta: http://freecodecamp.com/field-guide/what-is-the-free-code-camp-code-of-conduct?" ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Trete unserem Chat-Raum bei", + "descriptionDe": [ + "Nun werden wir dem Chat-Raum von Free Code Camp beitreten. Du kannst jederzeit vorbei kommen um abzuhängen, Fragen zu stellen oder andere Camper für Paarprogrammierung zu finden.", + "Stelle sicher, dass deine Email Adresse in deinem Free Code Camp Account hinterlegt ist. Bitte beachte, dass deine Email Adresse für die Öffentlichkeit nicht einsehbar ist, aber für andere Camper in Slack wird sie sichtbar sein. Du kannst sie hier eintragen: http://freecodecamp.com/account.", + "Klicke auf diesen Link, um von Slack eine Einladung zu den Chat-Räumen von Free Code Camp zu erhalten: http://freecodecamp.com/api/slack.", + "Kontrolliere jetzt dein Email Postfach und klicke in der Email von Slack auf den Link.", + "Beende die Registrierung und vervollständige dein Profil. Vergiss nicht, dein Profil-Bild hochzuladen. Ein Bild von deinem Gesicht ist am besten. So werden dich andere Personen im Chat sehen, also zeige dich von deiner Schokoladenseite.", + "Jetzt betrete den General Chat-Raum und stelle dich den anderen vor, indem du folgendes schreibst: \"Hello world!\".", + "Teile den anderen Campern mit, wie du auf Free Code Camp gestoßen bist. Wir interessieren uns auch dafür, warum du Programmieren lernen willst – aber auf englisch bitte, sonst versteht dich kaum einer.", + "Behalte den Chat geöffnet, während du an den Challenges arbeitest. Auf diesem Weg kannst du schnell nach Hilfe fragen, wenn du nicht weiter kommst. Du kannst auch jederzeit mit uns chatten, wenn du eine Pause einlegen möchtest.", + "Du kannst den Chat auch über die Schaltfläche \"Chat\" oben rechts auf dieser Seite erreichen.", + "Damit diese Community ein freundlicher und positiver Ort zum Lernen bleibt, lies und folge bitte unseren Verhaltensregeln: http://freecodecamp.com/field-guide/what-is-the-free-code-camp-code-of-conduct?" + ] }, { "id": "bd7125d8c441eddfaeb5bdff", @@ -119,7 +143,16 @@ "Para terminar, ten en cuenta que nuestra currícula open-source es un trabajo en progreso. Nuestra comunidad de voluntarios está mejorandola constantemente. Si crees que te has topado con algún bug, error ortográfico o algo que parezca confuso, haznos el favor de abrir un ticket a través de Github: https://github.com/FreeCodeCamp/freecodecamp/issues." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Besuche die Challenge Map", + "descriptionDe": [ + "Bevor du startest, wollen wir dir ein paar Dinge zeigen.", + "Betrachte die Challenge Map. Klicke auf \"Map\" oben rechts auf dieser Seite. Diese Übersicht zeigt dir alle Challenges.", + "Du solltest alle Challenges in der gezeigten Reihenfolge abschließen.", + "Hast du alle Waypoint-Challenges beendet, folgen die Bonfires (Algorithmen), darauf Ziplines (Frontend Development) und zum Schluss Basejumps (Full Stack Development). Danach wirst du anfangen, Projekte für gemeinnützige Organisationen umzusetzen.", + "Diese Challenge Map dient dir als Orientierung. Du kannst einfach auf \"Learn\" klicken und direkt zur nächsten Challenge fortfahren.", + "Bitte beachte, dass unser Open Source Lehrplan nicht fertig ist. Unsere freiwillige Community verbessert diesen stetig. Wenn du einen Bug, Rechtschreib-Fehler oder etwas gefunden hast, das dir komisch vorkommt, öffne bitte ein GitHub Issue: https://github.com/FreeCodeCamp/freecodecamp/issues. Wie gehabt bitte in englischer Sprache." + ] }, { "id": "bd7125d8c441eddfaeb5bd1f", @@ -151,7 +184,15 @@ "Lee algunos de nuestros artículos, luego continúa con tu siguiente desafío." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Stöbere in unserem Field Guide", + "descriptionDe": [ + "Free Code Camp hat einen aktuellen Field Guide, welcher viele deiner Fragen beantworten wird.", + "Klicke oben rechts auf \"Field Guide\".", + "Du kannst im Field Guide nach Lust und Laune stöbern. Die meisten der Artikel sind in weniger als einer Minute gelesen.", + "Wenn du auf den besagten Field Guide in der Navigation klickst, wirst du direkt zu dem Artikel geleitet, den du als letztes gelesen hast.", + "Lies ein paar der Artikel, dann schreite zu deiner nächsten Challenge voran." + ] }, { "id": "bd7125d8c441eddfaeb5bd2f", @@ -187,7 +228,17 @@ "Una vez que estés satisfecho con tu página de portafolio, puedes seguir con el siguiente desafío." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Personalisiere deine Portfolio-Seite", + "descriptionDe": [ + "Du und die anderen Camper habt Portfolio-Seiten.", + "Um zu deinem Portfolio zu gelangen, klicke oben rechts auf dein Bild.", + "Dein Portfolio wird deinen Fortschritt im Free Code Camp automatisch anzeigen.", + "Klicke auf \"Update my portfolio page or manage my account\"", + "Du kannst deine GitHub, Twitter und LinkedIn Accounts verlinken. Wenn du bereits ein paar Websites gebaut hast, kannst du sie ebenfalls präsentieren.", + "Stelle sicher, dass du auf \"Update my Bio\" oder \"Update my Social Links\" klickst, um diese neuen Informationen zu speichern.", + "Sobald du zufrieden mit deinem Portfolio bist, kannst du zur nächsten Challenge fortfahren." + ] }, { "id": "bd7126d8c441eddfaeb5bd3f", @@ -227,7 +278,19 @@ "Ahora que has aprendido a utilizar las Noticias de Campers, continuaremos con el siguiente desafío." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Verpasse nicht die Camper News", + "descriptionDe": [ + "Camper News ist der beste Ort für unsere Camper, nützliche Links zu teilen und zu diskutieren.", + "Klicke oben rechts auf \"News\".", + "Du wirst eine Vielzahl an Links sehen, die bereits geteilt wurden. Klicke auf \"Discuss\" unter einem von ihnen.", + "Du kannst Links bewerten. Das wird den Link in der Platzierung weiter nach oben befördern.", + "Du kannst einen Link auch kommentieren. Wenn jemand auf deinen Kommentar antwortet, wirst du per Email benachrichtigt, sodass du zurück kommen und reagieren kannst.", + "Du kannst ebenfalls Links teilen. Bearbeite den Titel des Links und hinterlasse einen ersten Kommentar, um die Diskussion zu starten.", + "Du kannst dir das Portfolio jedes Campers anschauen, der einen Link geteilt hat. Klicke dazu einfach auf ihr Bild.", + "Sobald du einen Link teilst, erhältst du einen Punkt. Jedes Mal, wenn jemand deinen Link bewertet, erhältst du zusätzlich einen Punkt.", + "Jetzt da du gelernt hast, was Camper News ist, kanns du zur nächsten Challenge gehen." + ] }, { "id": "bd7126d8c441eddfaeb5bd3e", @@ -265,7 +328,18 @@ "En caso seas el anfitrión de un grupo de estudio, estes programando en pares en una biblioteca local o piensen en ir a un hackathon de fin de semana, tu grupo local te ayudará a hacerlo." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Treffe andere Camper in deiner Stadt", + "descriptionDe": [ + "Der beste Weg, motiviert am Ball zu bleiben, ist mit anderen Campern abzuhängen.", + "Slack und Camper News sind super Wege zur Kommunikation mit anderen Campern. Es gibt aber nichts vergleichbares, Personen im echten Leben zu treffen.", + "Um leicht andere Camper in deiner Stadt zu treffen, solltest du der Facebook Gruppe deiner Stadt beitreten. Klicke hier um unsere wachsende Liste der lokalen Gruppen zu sehen.", + "Klicke auf den Link zu deiner Stadt. Sobald Facebook geladen ist, klicke auf \"Gruppe beitreten\".", + "Unsere lokalen Gruppen sind neu. Solltest du deine Stadt also nicht in der Liste sehen, erstelle doch bitte eine Facebook Gruppe deiner Stadt indem du den Anweisungen dazu folgst.", + "Wenn du keinen Facebook Account hast, empfehlen wir dir einen zu erstellen. Auch wenn dieser nur dazu dient, sich mit anderen Campern in deiner Stadt zu koordinieren.", + "Unsere Gruppen erlauben dir, Events zu planen und Fotos davon zu teilen.", + "Egal ob du eine Studenten-Gruppe, Paarprogrammierung an deiner lokalen Bibliothek oder einen Hackathon am Wochenende anbieten willst. Die Gruppe deiner Stadt macht das alles möglich." + ] }, { "_id": "bd7126d8c431eddfaeb5bd3e", @@ -334,7 +408,18 @@ "Ahora que tienes en claro el procedimiento a seguir cuando necesites ayuda. ¡Empecémos a programar! Continua con el siguiente desafío." ], "namePt": "", - "descriptionPt": [] + "descriptionPt": [], + "nameDe": "Waypoint: Der Weg des Hackers – Hilfe erhalten mit RSAP", + "descriptionDe": [ + "Lass uns eine letzte Sache behandeln, bevor du mit den Lektionen beginnst: Wie du Hilfe bekommst.", + "Immer wenn du nicht weiter kommst oder du nicht weißt, was als nächstes zu Tun ist, kannst du diesem einfachen Algorithmus (Prozedur) folgen: RSAP (Read, Search, Ask, Post – Lesen, Suchen, Fragen, Posten).", + "Erstens, R – Lies die Dokumentation oder die Fehler-Meldung. Eine wichtige Eigenschaft aller Coder ist es, Anweisungen zu interpretieren und zu folgen.", + "Danach, S – Suche bei Google. Es bedarf viel Übung, gute Such-Anfragen zu stellen. Wenn du bei Google suchst, solltest du die Sprache oder das Framework angeben, welches du benutzt. Außerdem wirst du die aktuellsten Ergebnisse haben wollen.", + "Wenn du keine Antwort auf deine Frage erhalten hast, folge A – Frage deine Freunde. Wenn du Probleme hast, kannst du andere Camper fragen. Wir haben einen speziellen Chat-Raum zur Unterstützung beim Lernen eingerichtet. Gehe zu https://freecode.slack.com/messages/help/. Behalte diesen Chat offen, solange du an den Challenges arbeitest.", + "Und zum Schluss, P – Poste auf Stack Overflow. Bevor du das tust, lies bitte den Leitfaden für gute Fragen auf Stack Overflow: http://stackoverflow.com/help/how-to-ask.", + "Hier ist unser detaillierter Field Guide um Hilfe zu erhalten: http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck.", + "Jetzt hast du einen klaren Algorithmus, dem du folgen kannst wenn du Hilfe benötigst. Fangen wir an zu programmieren! Gehe zur nächsten Challenge." + ] } ] }