8 Code Playground zum Erlernen der Webentwicklung

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, in 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 mit ihnen herumzuspielen.

Wenn Sie die Webentwicklung erlernen und Ihre HTML- oder CSS-Kenntnisse üben, ist die Verwendung eines Codespielplatzes nützlich, um einfache Webseiten online zu erstellen. Außerdem könnten Sie Trendprojekte auf diesen Plattformen nutzen und sie als Lernressourcen verwenden.

Auf der anderen Seite, wenn Sie ein professioneller Webentwickler sind und Ihre Arbeit zeigen möchten, sind Code Playgrounds der perfekte Ort dafür.

Das Beste daran ist, dass die meisten Code Playgrounds eine kostenlose Stufe haben und Sie Codeergebnisse in Ihre Website einbetten können.

Lassen Sie uns einige von ihnen überprüfen!

JSFiddle

JSFiddle ist ein Code-Spielplatz, auf dem Sie HTML-, CSS- und Javascript-Snippets testen können. Es stammt aus einer Proof-of-Concept-App im Jahr 2009 und ist heute eine der größten Code-Spielplätze auf dem Markt.

Sie können ein kostenloses Konto erstellen, alle Ihre Geigen speichern und auch die Schnipsel anderer Leute teilen.

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

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 diese Code-Spielwiese zum Zeitpunkt des Schreibens keine anderen gängigen Programmiersprachen wie Python, Go oder PHP, sodass Sie nicht erwarten können, darauf eine Full-Stack-App zu erstellen.

Merkmale

• Kostenlose Plattformnutzung
• Minimalistische Benutzeroberfläche
• Unterstützung für HTML, CSS und JS
• Fork ein beliebiges öffentliches Geigen-Snippet auf der Plattform
• Arbeiten Sie mit anderen Personen über den Audio-Chat direkt auf der Website zusammen
• Gute Dokumentation

Codepen

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

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

Wie sieht es mit der Entwicklungserfahrung aus?

Ich kann Ihnen sagen, dass Codepen einen benutzerfreundlichen Editor mit drei anpassbaren Bedienfeldern zum Coden 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

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

CodeSandbox

Das Erstellen eines Prototyps für eine Website kann eine schwierige Aufgabe sein, wenn Sie nicht über das richtige Setup verfügen. Die Verwendung von 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 einer anpassbaren VS-Code-ähnlichen Erfahrung bietet Ihnen dieser Code-Spielplatz alles, um in Sekunden mit dem Codieren zu beginnen.

Wenn Ihr Hauptzweck die Zusammenarbeit ist, müssen Sie lediglich Ihren Sandbox-Link freigeben, und Sie sind bereit für die Paarprogrammierung in Echtzeit.

Sie können beispielsweise eine handverlesene Liste der besten Sandboxes durchsuchen.

Ich könnte keine Zeit mehr haben, alle Eigenschaften von CodeSandbox aufzulisten, also lassen Sie uns seine Killerfunktionen erwähnen.

Merkmale

• GitHub-Integration
• Basierend auf dem Monaco-Editor , der den beliebten VScode-Editor antreibt
• Zusammenarbeit erste Plattform
• Bereitstellung auf Vercel oder Netlify
• Debugging-Tools
• Gebrauchsfertige Testframeworks
• npm-Unterstützung

Sololernen

Die beliebte Coding-Lernplattform Sololearn verfügt über einen eigenen Code-Playground 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 sie bietet eine ablenkungsfreie Umgebung, in der Sie Code schreiben und ausführen können.

Dies sollte mehr als genug sein, wenn Sie gerade erst mit der Programmierung beginnen.

Eine weitere nette Sache an Sololearn ist die großartige Community und die Unterstützung für mehrere 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 tolles Ökosystem mit den Sololearn-Kursen

Zusammenfassend lässt sich sagen, dass der Code-Spielplatz von Sololearn nicht im Akku enthalten ist, aber er funktioniert so, wie er sein soll, und wenn Sie bereits Teil der Millionen von Sololernern sind, sollten Sie es versuchen.

Codeply

Das Beste an Codeply ist die sofort einsatzbereite Unterstützung für mehrere Frameworks und Bibliotheken 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

• Kostenlose Plattformnutzung
• Einfache und dennoch unkomplizierte Dokumentation
• Pro-Plan mit einmaliger Gebühr
• Enthält über 50 Bibliotheken
• Testen Sie Ihren Web-Muck-Up in verschiedenen Bildschirmauflösungen

Replizieren

Replit 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 Web-App, die eine beliebige moderne JS-Bibliothek verwendet.

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

Mir könnte buchstäblich das Papier ausgehen, um alle Funktionen von Replit zu erwähnen, also springen wir zu den wichtigsten.

Merkmale

• Das kostenlose Starterpaket oder 5$ /Monat Hackerplan
• Multiplayer-Modus (Live-Paar-Programmierung)
• Große Gemeinschaft
• Viele Sprachen unterstützt
• Anpassung des Editors
• Schaltfläche „Ausführen“: Führen Sie das Projekt mit anpassbaren Aktionen aus
• Geheimspeicher
• Gehosteter Code

StackBlitz

Wenn Sie ohne VS-Code nicht leben können, ist StackBlitz 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 Erfahrung mit dem Code-Editor ist es eine ziemlich solide Spielwiese. Sie können gebrauchsfertige Vorlagen für Frontend-Frameworks und Bibliotheken wie React, Vue, Angular, Svelte und Ionic verwenden.

Die Haupteigenschaft dieses Tools ist jedoch die Möglichkeit, mit Backend-Frameworks wie Node.js, Next.js und GraphQL herumzuspielen.

Merkmale

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

Panne

Nicht zuletzt ist Glitch eine kollaborative Programmierumgebung, die das Erstellen einer Web-App erleichtert.

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 nicht nur mit HTML, CSS und JS erstellen, sondern auch mit Node.js (Backend), React oder Eleventy (von denen ich nicht wusste, dass sie existieren, bevor ich zur Seite Glitches ging).

Merkmale

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

Fazit

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

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