Daftar situs untuk belajar pemrograman web – Code playground

By | November 18, 2022

Apakah Anda seorang pengembang pemula atau pengembang berpengalaman, taman bermain kode berguna untuk berbagi dan belajar dengan orang lain.

Code Playground adalah layanan online tempat Anda dapat menulis, mengompilasi (atau menjalankan), dan membagikan kode Anda dengan orang lain. Mereka juga memberi Anda kemampuan untuk bercabang dan bermain dengan kode orang lain.

Jika Anda mempelajari pengembangan web dan melatih keterampilan HTML atau CSS, menggunakan taman bermain kode akan berguna untuk membuat halaman web sederhana secara online. Anda juga dapat memanfaatkan desain tren di platform ini dan menggunakannya sebagai sumber belajar.

Di sisi lain, jika Anda seorang pengembang web profesional dan ingin memamerkan karya Anda, taman bermain kode adalah tempat yang tepat untuk itu.

Bagian terbaiknya adalah sebagian besar taman bermain kode memiliki tingkat gratis dan Anda dapat menyematkan hasil kode ke situs Anda.

Mari kita lihat beberapa di antaranya!

JSFiddle

JSFiddle adalah taman bermain kode tempat Anda dapat menguji cuplikan kode HTML, CSS, dan JavaScript. Itu berasal dari aplikasi proof-of-concept pada tahun 2009 dan saat ini merupakan salah satu taman bermain terbesar untuk kode.

Anda dapat membuat akun gratis, menyimpan semua biola Anda, dan juga memotong potongan orang lain.

Hal lain yang mengesankan tentang JSFiddle adalah sesi kolaborasi. Anda dapat membuat sesi obrolan audio sambil membuat kode di biola.

Jika Anda seorang blogger yang ingin menyematkan hasil potongan kode serta kode sumbernya, JSFiddle akan menjadi pilihan yang sangat baik.

Tentu saja, pada saat penulisan kode ini, taman bermain ini tidak mendukung bahasa pemrograman populer lainnya seperti Python, Go, atau PHP, jadi Anda tidak dapat berharap untuk membuat aplikasi full-stack di atasnya.

Karakteristik

  • Platform gratis
  • Antarmuka minimalis
  • Dukungan HTML, CSS, dan JS
  • Fork potongan biola publik apa pun di platform
  • Berkolaborasi dengan orang lain menggunakan obrolan audio langsung di situs
  • Nah dokumentasi

Seperti sebagian besar platform ini, ada ” tambahan ” untuk membantu menjaga dan menjalankannya. Jika Anda mengandalkan mereka, Anda harus mempertimbangkan untuk membuat cadangan.

  Mengapa headphone peredam bising menyakiti telinga saya?

codepen.io

coding bukan hanya tempat bermain kode, tetapi komunitas pemrogram yang ingin meningkatkan keterampilan mereka dan berbagi karya terbaik.

Oleh @Yakudoo

Dengan lebih dari 6 juta pengguna, ini adalah salah satu editor kode online yang paling banyak digunakan untuk pengembangan frontend. Jika Anda baru mulai belajar front-end, mencari ide dan motivasi untuk terus belajar adalah hal yang ideal.

Bagaimana dengan pengalaman pengembangan?

Saya dapat memberi tahu Anda bahwa Codepen memiliki editor yang ramah pengguna dengan tiga panel yang dapat disesuaikan untuk pengkodean dalam HTML, CSS, dan JS. Codepen menyertakan dukungan bawaan untuk praprosesor JavaScript dan CSS seperti TypeScript dan Sass. Juga, jika Anda mengandalkan paket npm, Anda dapat menginstalnya dari panel pengaturan.

Karakteristik

  • Paket pro opsional
  • Editor kode yang mudah digunakan
  • Komunitas yang hebat
  • Sebagian besar kode adalah open source
  • Tempat sempurna untuk belajar frontend

CodeSandbox

Membuat prototipe situs web bisa menjadi tugas yang sulit jika Anda tidak memiliki penyiapan yang tepat. Menggunakan CodeSandbox harus menjadi keputusan yang jelas ketika pengembangan web yang cepat menjadi prioritas.

Seperti namanya, CodeSandbox menyediakan lingkungan sandbox untuk pengembangan frontend.

Dari integrasi GitHub dan alat debug hingga lingkungan seperti kode VS yang dapat disesuaikan, taman bermain kode ini memberi Anda semua yang Anda butuhkan untuk memulai pengkodean dalam hitungan detik.

Jika kolaborasi adalah fokus utama Anda, cukup bagikan tautan ke kotak pasir dan Anda siap untuk pemrograman pasangan waktu nyata.

Misalnya, Anda dapat menelusuri daftar kotak pasir terbaik yang dipilih dengan cermat .

Mungkin tidak ada waktu untuk menghitung semua fitur CodeSandbox, jadi mari kita sebutkan fitur-fiturnya yang mematikan.

Karakteristik

  • Integrasi dengan GitHub
  • Berdasarkan editor Monaco yang mendukung editor VScode yang populer
  • Platform kolaboratif pertama
  • Terapkan ke Vercel atau Netlify
  • Alat debug
  • Kerangka uji siap pakai
  • dukungan mis

https://www.sololearn.com/

Platform pembelajaran koding populer Learning Solo memiliki taman bermain koding sendiri untuk pengembangan web.

Sejujurnya, ini bukan IDE berfitur lengkap seperti editor online lainnya yang telah kami lihat di artikel ini, tetapi menawarkan lingkungan bebas gangguan tempat Anda dapat menulis dan menjalankan kode.

  Cara mengonversi kontak VCF ke file CSV

Ini seharusnya cukup jika Anda baru dalam pemrograman.

Hal keren lainnya tentang Sololearn adalah komunitas yang hebat dan dukungan untuk beberapa bahasa pemrograman – yang cukup bagus jika Anda ingin bermain-main dengan teknologi lain.

Karakteristik

  • Gratis penggunaan akun Sololearn Anda
  • Editor kode online sederhana
  • Komunitas berbagi kode yang besar
  • Dukungan multi-bahasa
  • Ekosistem hebat dengan kursus Sololearn

Secara keseluruhan, Sololearn Playground tidak mengandung baterai, tetapi berfungsi sebagaimana mestinya, dan jika Anda sudah menjadi salah satu dari jutaan pelajar mandiri, Anda harus mencobanya.

Codeply

Hal terbaik tentang Pengkodean adalah dukungan untuk banyak kerangka kerja dan pustaka di luar kotak dan editor kode berorientasi desain yang responsif.

Jika Anda baru saja memulai dengan framework baru seperti React, Vue, atau Angular, Codeply adalah tempat yang tepat untuk memulai dengan satu set lengkap template pemula dan komunitas yang hebat dengan lebih dari 40.000 developer.

Karakteristik

  • Platform gratis
  • Dokumentasi sederhana tapi sederhana
  • Paket pro biaya satu kali
  • Berisi lebih dari 50 perpustakaan
  • Uji jaringan Anda dalam resolusi layar yang berbeda

ulang

Ulangi mungkin adalah IDE online yang paling cocok untuk pengembang mana pun. Muncul dengan semua yang Anda butuhkan untuk membangun, dari beranda sederhana hingga aplikasi web kompleks menggunakan perpustakaan JS modern apa pun.

Dengan Replit, Anda dapat membuat kode dalam lebih dari 50 bahasa, menulis aplikasi secara sinkron dengan pengguna lain, menguji program Anda, berintegrasi dengan GitHub, dan mendapatkan akses ke salah satu komunitas pengembang terbesar.

Saya benar-benar bisa kehabisan kertas yang mencantumkan semua fitur Replit, jadi mari kita ke yang utama.

Karakteristik

  • Paket pemula gratis atau paket peretasan $5/bulan
  • Multiplayer (pemrograman pasangan langsung)
  • Komunitas besar
  • Beberapa bahasa didukung
  • Kustomisasi editor
  • Tombol Jalankan: Luncurkan proyek dengan tindakan yang dapat disesuaikan
  • Penyimpanan rahasia
  • Kode yang dihosting

StackBlitz

Jika Anda tidak dapat hidup tanpa VS Code, StackBlitz adalah opsi yang tepat untuk Anda. Seperti CodeSandbox, itu didasarkan pada editor Monaco yang menggerakkan editor kode populer ini.

Cukup masuk ke akun GitHub Anda dan voila! Anda mendapatkan akses ke lingkungan yang akrab.

Selain pengalaman editor kode, ini adalah taman bermain yang cukup solid. Anda dapat menggunakan template yang sudah jadi untuk framework dan library frontend seperti React, Vue, Angular, Svelte, dan Ionic.

  Cara mendapatkan mode potret pada Nexus 6P dan Nexus 5X

Namun kekhasan utama alat ini adalah kemampuannya untuk bermain dengan kerangka kerja back-end seperti Node.js, Next.js, dan GraphQL.

Karakteristik

  • Paket kadet gratis.
  • Pengalaman VS Code di browser. Ini termasuk Intellisense, pencarian desain, dan banyak lagi.
  • Pengalaman pengkodean yang mulus (sangat mulus).
  • Editor kode offline (Hei! Mungkin berguna jika Anda terputus selama satu atau dua hari)
  • URL Aplikasi yang Dihosting: Berbagi langsung dengan mudah

Glitch

Last but not least, Glitch adalah lingkungan pengembangan kolaboratif yang membuat pengembangan aplikasi web lebih mudah.

Ini memiliki salah satu antarmuka pengkodean terbaik! hanya melihat:

Jika Anda bertanya-tanya, ya itu memiliki mode gelap.

Selain antarmukanya yang indah, Glitch digunakan oleh jutaan orang karena kegunaannya, pemrograman pasangan langsung, dan komunitas yang ramah.

Anda dapat membuat semua jenis aplikasi tumpukan penuh tidak hanya menggunakan HTML, CSS, dan JS, tetapi juga Node.js (Backend), React, atau Eleven (yang saya tidak tahu keberadaannya sebelum membuka situs Glitches).

Karakteristik

  • Paket gratis dengan opsi peningkatan
  • Buat aplikasi lengkap di browser Anda
  • Pemrograman pasangan hidup
  • Antarmuka yang menyenangkan
  • Aplikasi pemula
  • Remix (atau garpu) aplikasi publik orang lain