Einführung in WebIDE

1. Das beste Widget der Welt — WebIDE

Praxis ist alles. Damit das Lernen von HTML für dich spannender wird, geben wir dir zu jeder Vorlesung ein paar Aufgaben. So merkst du dir den gelesenen Stoff leichter. Und in nur ein paar Minuten bekommst du deine erste Aufgabe.

Damit du die Aufgaben bequem lösen kannst, haben wir für dich ein spezielles Widget geschrieben — WebIDE. Es sieht so aus:

Links siehst du die Aufgabenstellung und eine Liste der Anforderungen, die deine Lösung erfüllen muss. In der Mitte ist der Editor, in dem du deine Lösung schreiben wirst. Unten siehst du das Ergebnis — deine Seite in einem separaten Fenster.

2. Grundlegende Buttons

Oben siehst du Buttons:

• Check: deine Lösung zum Testen senden.
• Run: das Programm starten, ohne es zu testen (der Testzähler wird nicht erhöht).
• Lösung — ein Dropdown-Menü, das Folgendes enthält:
  • Richtige Lösung: die Autorenlösung der Aufgabe anzeigen.
  • Zu meinem Code zurückkehren: zu deinem Code zurückkehren, nachdem du die richtige Lösung angesehen hast.
  • Lösung zurücksetzen: die Lösung der Aufgabe zurücksetzen — von vorne anfangen.
• Hilfe — eine Frage zu deiner Lösung in der CodeGym-Community stellen.
• Diskussion: die Aufgabe mit anderen Nutzern diskutieren.
• Code-Analyse: Tipps zum Stil deines Codes bekommen.

3. Welche Buttons klicken

Nachdem du dein Programm (die Lösung der Aufgabe) geschrieben hast, musst du den Button „Check“ klicken. Dein Programm wird dabei an den CodeGym-Server gesendet, wo es ausgeführt und automatisch überprüft wird.

Wenn du es nicht schaffst, eine Lösung zu schreiben, benutze einen Hint (du musst nicht mit dem Kopf gegen die Wand). Im Menü „Hilfe“ klickst du auf den Button „Hinweis“. Du kannst dir auch die richtige Lösung ansehen, indem du auf den Button „Richtige Lösung“ klickst.

Bist du bereit? Dann ist hier deine erste Aufgabe: