8 Code Playground zum Erlernen der Webentwicklung

von

Egal, ob Sie ein Programmieranfänger oder ein erfahrener Entwickler sind, Code Playgrounds sind nützlich, wenn Sie mit anderen teilen und lernen.

Ein Code Playground ist ein Onlinedienst, bei dem Sie Code schreiben, kompilieren (oder ausführen) und mit anderen teilen können. Sie geben Ihnen auch die Möglichkeit, die Codes anderer zu forken und damit herumzuspielen.

Wenn Sie Webentwicklung lernen und Ihre HTML- oder CSS-Kenntnisse üben, wäre die Verwendung eines Code Playground hilfreich, um einfache Webseiten online zu erstellen. Außerdem könnten Sie Trendprojekte auf diesen Plattformen nutzen und sie als Lernressourcen verwenden.

Wenn Sie andererseits ein professioneller Webentwickler sind und mit Ihrer Arbeit angeben möchten, sind Code Playgrounds der perfekte Ort dafür.

Das Beste daran ist, dass die meisten Code-Spielplätze eine kostenlose Stufe haben und Sie Code-Ergebnisse in Ihre Website einbetten können.

Lassen Sie uns einige von ihnen überprüfen!

JSFiddle

JSFiddle ist ein Code-Playground, auf dem Sie HTML-, CSS- und Javascript-Snippets testen können. Es entstand 2009 aus einer Proof-of-Concept-App und ist jetzt einer der größten Code-Spielplätze da draußen.

Sie können ein kostenloses Konto erstellen, alle Ihre Fiddles speichern und auch die Snippets anderer Leute forken.

Eine weitere beeindruckende Sache bei JSFiddle sind die Kollaborationssitzungen. Sie können eine Audio-Chat-Sitzung erstellen, während Sie in der Geige programmieren.

Wenn Sie ein Blogger sind, der das Ergebnis von Codeschnipseln und auch deren Quellcode einbetten möchte, wäre JSFiddle eine ausgezeichnete Option.

Natürlich unterstützt dieser Code-Spielplatz zum Zeitpunkt des Schreibens keine anderen gängigen Programmiersprachen wie Python, Go oder PHP, sodass Sie nicht damit rechnen können, eine Full-Stack-App darauf zu erstellen.

Merkmale

  • Kostenlos nutzbare Plattform
  • Minimalistische Oberfläche
  • Unterstützung für HTML, CSS und JS
  • Verzweigen Sie ein beliebiges öffentliches Fiddle-Snippet auf der Plattform
  • Arbeiten Sie mit anderen Personen per Audio-Chat direkt auf der Website zusammen
  • Gut Dokumentation

Wie bei den meisten dieser Plattformen gibt es ein „extra” Plan, der hilft, sie am Laufen zu halten. Wenn Sie sich auf sie verlassen, sollten Sie in Betracht ziehen, sie zu sichern.

  So suchen Sie mehrere Dateitypen im Datei-Explorer

Codestift

Codestift ist nicht nur ein Code-Spielplatz, sondern eine Community von Entwicklern, die ihre Fähigkeiten verbessern und die bestmögliche Arbeit teilen möchten.

Von @Yakudoo

Mit über 6 Millionen Benutzern ist es einer der am häufigsten verwendeten Online-Code-Editoren für die Frontend-Entwicklung. Wenn Sie anfangen, Front-End zu lernen, ist es ideal, Ideen und Motivation zu finden, um Ihre Lernreise fortzusetzen.

Was ist mit der Entwicklungserfahrung?

Ich kann Ihnen sagen, dass Codepen einen benutzerfreundlichen Editor mit drei anpassbaren Bedienfeldern zum Codieren in HTML, CSS und JS hat. Codepen enthält integrierte Unterstützung für Javascript- und CSS-Präprozessoren wie Typescript und Sass. Wenn Sie sich auf ein npm-Paket verlassen, können Sie es auch über das Einstellungsfenster installieren.

Merkmale

  • Optional Pro-Plan
  • Einfach zu bedienender Code-Editor
  • Tolle Gemeinschaft
  • Die meisten Codepens sind Open Source
  • Der ideale Ort, um die Frontend-Entwicklung zu üben

CodeSandbox

Das Prototyping einer Website kann eine schwierige Aufgabe sein, wenn Sie nicht über die richtige Einrichtung verfügen. Verwenden CodeSandbox sollte eine einfache Entscheidung sein, wenn es darum geht, Websites schnell zu erstellen.

Wie der Name schon sagt, bietet CodeSandbox eine Sandbox-Umgebung für die Frontend-Entwicklung.

Von GitHub-Integrationen und Debugging-Tools bis hin zu einem anpassbaren VS-Code-ähnlichen Erlebnis bietet Ihnen dieser Code-Playground alles, um in Sekundenschnelle mit dem Codieren zu beginnen.

Wenn Ihr Hauptzweck darin besteht, zusammenzuarbeiten, müssen Sie lediglich Ihren Sandbox-Link freigeben, und Sie wären bereit, Paarprogrammierung in Echtzeit durchzuführen.

Sie können beispielsweise eine handverlesene Liste der beste Sandkästen.

Mir könnte die Zeit davonlaufen, alle Eigenschaften von CodeSandbox aufzulisten, also erwähnen wir seine Killer-Features.

Merkmale

  • GitHub-Integration
  • Basierend auf dem Monaco-Editor, der den beliebten VScode-Editor unterstützt
  • Erste Plattform für Zusammenarbeit
  • Bereitstellung auf Vercel oder Netlify
  • Debugging-Tools
  • Gebrauchsfertige Test-Frameworks
  • npm-Unterstützung

Sololernen

Die beliebte Coding-Lernplattform Sololernen hat sein eigenes Code-Spielplatz für die Webentwicklung.

Um ehrlich zu sein, ist es keine voll funktionsfähige IDE wie die anderen Online-Editoren, die wir in diesem Artikel gesehen haben, aber es bietet eine ablenkungsfreie Umgebung, in der Sie Code schreiben und ausführen können.

  Wie man bei Wordle gewinnt: Tipps und Tricks

Dies sollte mehr als genug sein, wenn Sie gerade erst mit dem Programmieren beginnen.

Eine weitere nette Sache bei Sololearn ist die großartige Community und die Unterstützung mehrerer Programmiersprachen – was ziemlich gut ist, wenn Sie mit anderen Technologien herumspielen möchten.

Merkmale

  • Kostenlos mit Ihrem Sololearn-Konto zu verwenden
  • Einfacher Online-Code-Editor
  • Große Community, um Ihren Code zu teilen
  • Unterstützung für mehrere Sprachen
  • Ein großartiges Ökosystem mit den Sololearn-Kursen

Zusammenfassend lässt sich sagen, dass der Code-Spielplatz von Sololearn nicht batteriebetrieben ist, aber er funktioniert so, wie er sein soll, und wenn Sie bereits zu den Millionen von Sololearnern gehören, sollten Sie es versuchen.

Codeply

Das beste Ding über Codeply ist die Unterstützung für mehrere Frameworks und Bibliotheken, die sofort einsatzbereit sind, und der responsive designorientierte Code-Editor.

Wenn Sie gerade erst mit einem neuen Framework wie React, Vue oder Angular beginnen, ist Codeply aufgrund eines vollständigen Satzes von Startvorlagen und einer großartigen Community von über 40.000 Entwicklern ein großartiger Ausgangspunkt.

Merkmale

  • Kostenlos nutzbare Plattform
  • Einfach und doch unkompliziert Dokumentation
  • Einmalige Gebühr pro Plan
  • Enthält über 50 Bibliotheken
  • Testen Sie Ihren Web-Muckup in verschiedenen Bildschirmauflösungen

Wiederholen

Wiederholen ist möglicherweise die am besten geeignete Online-IDE für jeden Entwickler da draußen. Es enthält buchstäblich alles, was Sie zum Erstellen benötigen, von einer einfachen Homepage bis hin zu einer komplexen Webanwendung, die eine beliebige moderne JS-Bibliothek verwendet.

Mit Replit können Sie in über 50 Sprachen codieren, Apps synchron mit Ihren Kollegen schreiben, Ihre Programme testen, in GitHub integrieren und Zugang zu einer der größten Entwickler-Communities erhalten.

Mir könnte buchstäblich das Papier ausgehen, wenn ich alle Funktionen von Replit erwähnen würde, also lasst uns zu den wichtigsten springen.

Merkmale

  • Das kostenlose Starterpaket oder 5$ /Monat Hacker-Plan
  • Multiplayer-Modus (Live-Pair-Programmierung)
  • Große Gemeinschaft
  • Viele Sprachen unterstützt
  • Anpassung des Editors
  • Schaltfläche „Ausführen“: Führen Sie das Projekt mit anpassbaren Aktionen aus
  • Geheime Aufbewahrung
  • Gehosteter Code
  So übertragen Sie Daten von Ihrem alten PC auf Ihren neuen Mac

StackBlitz

Wenn Sie ohne VS-Code nicht leben können, StackBlitz ist die richtige Option für Sie. Genau wie CodeSandbox basiert es auf dem Monaco-Editor, der diesen beliebten Code-Editor antreibt.

Melden Sie sich einfach mit Ihrem GitHub-Konto an und voila! Sie erhalten Zugang zu einer vertrauten Umgebung.

Abgesehen von der Code-Editor-Erfahrung ist es ein ziemlich solider Spielplatz. Sie können gebrauchsfertige Vorlagen für Frontend-Frameworks und Bibliotheken wie React, Vue, Angular, Svelte und Ionic verwenden.

Aber die Haupteigenschaft dieses Tools ist die Fähigkeit, mit Backend-Frameworks wie Node.js, Next.js und GraphQL herumzuspielen.

Merkmale

  • Kostenloser „Kadett“-Plan
  • VS-Code-Erfahrung in Ihrem Browser. Dazu gehören IntelliSense, Projektsuche und mehr.
  • Flüssiges (wirklich flüssiges) Programmiererlebnis
  • Offline-Code-Editor (Hey! könnte nützlich sein, wenn Sie die Verbindung für ein oder zwei Tage trennen)
  • Gehostete App-URL: einfaches Live-Sharing

Panne

Zu guter Letzt, Panne ist eine kollaborative Programmierumgebung, die das Erstellen einer Web-App vereinfacht.

Es hat eine der angenehmsten Schnittstellen zum Programmieren! Mal schauen:

Falls Sie sich fragen, ja, es hat einen dunklen Modus.

Abgesehen von der schönen Benutzeroberfläche wird Glitch aufgrund seiner Benutzerfreundlichkeit, der Live-Pair-Programmierung und der freundlichen Community von Millionen verwendet.

Sie können jede Art von Full-Stack-Apps erstellen, die nicht nur HTML, CSS und JS, sondern auch Node.js (Backend), React oder Elfzig (von dem ich nicht wusste, dass es existiert, bevor ich auf die Glitches-Seite ging).

Merkmale

  • Kostenloser Plan mit Upgrade-Option
  • Entwickeln Sie Full-Stack-Apps in Ihrem Browser
  • Live-Paar-Programmierung
  • Angenehme Schnittstelle
  • Starter-Apps
  • Remixe (oder verzweige) die öffentlichen Apps anderer

Fazit

Heutzutage können Sie jede Web-App vollständig mit einem Code-Playground erstellen, wie wir ihn oben gesehen haben. Sie müssen keine schweren IDEs mehr auf Ihren Computer herunterladen, während Sie erstellen, debuggen, testen und bereitstellen können, ohne Ihren Webbrowser zu beenden.

Wenn Sie sich bei der Umstellung auf die Verwendung dieser Tools nicht ganz sicher sind, sehen Sie sich die 10 besten Code-Editoren an (die Sie auf Ihrem Computer installieren müssen).