Lerne HTML, CSS und JavaScript mit Codebeispielen, einem Editor, Quizfragen und Spielen.
Lerne Webentwicklung, indem du Code änderst und seine Auswirkungen beobachtest. HTML Code Play kombiniert HTML-, CSS- und JavaScript-Lektionen mit einem mobilen Code-Editor, ausführbaren Beispielen, Quizfragen und Programmierspielen. Nutze die App, um ein Konzept zu verstehen, es selbst auszuprobieren und deinen Lernfortschritt auf demselben Gerät zu verfolgen.
LESEN, BEARBEITEN UND AUSFÜHREN
Erkunde den Lernkatalog, öffne ein Tutorial und lies die Erklärung zusammen mit einem vollständigen Codebeispiel. Sende das Beispiel an den Editor, führe das Original aus und ändere dann ein Tag, einen Stil oder einen Ausdruck, um die Ausgabe zu vergleichen. Dieser praxisorientierte Workflow verbindet die gelesene Syntax mit der Seite oder dem Verhalten, das dadurch erzeugt wird.
Der Arbeitsbereich unterstützt die Bearbeitung von HTML, CSS und JavaScript mit Syntaxhervorhebung. Nutze die Funktionen „Rückgängig“ und „Wiederherstellen“ beim Experimentieren, suche nach Text, springe zu einer bestimmten Zeile und passe die Schriftgröße im Editor an. Erstelle eine neue Seite oder wähle eine verfügbare Vorlage, wenn du einen Ausgangspunkt benötigst. Öffne HTML-Dateien, speichere deine Arbeit, nutze „Speichern unter“, um eine Kopie zu erstellen, oder teile eine Codedatei über die Freigabeoptionen deines Geräts.
GEFÜHRTES LERNEN UND ÜBEN
Der Katalog umfasst 11 Themenbereiche der Webtechnologie, von Seitenstruktur und Styling über Skripting, Vektorgrafiken und responsive Layouts bis hin zu interaktiven Beispielen. Suchen Sie nach Lektionen anhand von Titel oder Abschnitt, um die benötigten Inhalte schnell zu finden. Speichern Sie hilfreiche Tutorials zur gezielten Wiederholung, fügen Sie Ihre eigenen Notizen hinzu und navigieren Sie mit den Steuerelementen „Zurück“ und „Weiter“ zwischen den Tutorials.
Jedes Tutorial kombiniert Erklärungen, Syntax und ein funktionierendes Beispiel. Anschließend können Sie Ihr Wissen mit einem Quiz oder einer Übungsaufgabe testen. In den Übungen vervollständigen Sie fehlenden Code. Hinweise und Feedback helfen Ihnen dabei, die übersehenen Details zu finden. Die Quiz-Ergebnisse ermöglichen es Ihnen, Ihr Verständnis zu überprüfen, bevor Sie zur Lektion zurückkehren.
SECHS ÜBUNGSMÖGLICHKEITEN
Wählen Sie ein Programmierspiel, um verschiedene Fähigkeiten zu trainieren:
- Code Builder: Ordnen Sie Blöcke neu an, um funktionierenden Code zu erstellen.
- Output Detective: Sagen Sie voraus, was ein Code-Snippet erzeugt.
- Bug Hunt: Finden Sie eine fehlerhafte Zeile.
- Fill the Gap: Wählen Sie das fehlende Code-Token aus.
- Zuordnungslabor: Verbinde Begriffe mit ihren Bedeutungen.
Schnellfeuer: Beantworte Richtig-oder-Falsch-Fragen im Zeitlimit.
Aktivitätslevel erfassen deine Ergebnisse und schalten den nächsten Schritt frei. Spiele verfügbare Level erneut, um deine Punktzahl zu verbessern, oder nutze die gemischten Übungs-Playlists, sobald diese verfügbar sind.
Lernen im Blick behalten
Der Fortschrittsbildschirm fasst wiederholte Lektionen, Quizze und Übungen nach Technologie zusammen. Sieh dir deine Kompetenzübersicht und den vorgeschlagenen nächsten Lernplan an, setze eine Lektion von zu Hause aus fort und nimm an einer täglichen Herausforderung teil. Serien und Herausforderungsabzeichen machen deine Aktivitäten sichtbar. Optionale Lernerinnerungen benötigen Benachrichtigungsberechtigung und können deaktiviert werden.
Dein Lernfortschritt, deine Notizen und Spielergebnisse werden auf dem Gerät gespeichert. Die Steuerung des Lernbildschirms umfasst größere Schriftarten, hohen Kontrast und reduzierte Bewegungen. Separate HTML-, CSS- und JavaScript-Tests bieten In-App-Zertifikate; diese dienen als Lernnachweise der App und sind keine anerkannte Qualifikation.
Beiträge der Online-Community bieten eine weitere Codequelle zum Erkunden, wenn du online bist. Netzwerkbasierte Inhalte und Beispiele, die externe Ressourcen laden, benötigen Internetzugang; die lokale Fortschrittsspeicherung bietet keine Cloud-Synchronisierung.
Für Anfänger, Studierende und Lernende, die Frontend-Konzepte wiederholen: Beginnen Sie mit einem Beispiel, nehmen Sie eine kleine Änderung vor und vertiefen Sie Ihr Verständnis durch Übung.