Salah satu dari banyak hal yang membuat frustrasi tentang pengembangan web adalah tidak memiliki cara mudah untuk membagikan proyek Anda dengan orang lain. Dalam banyak kasus, Anda harus meng-host proyek Anda di server web atau mengirim semua file yang sesuai kepada seseorang yang ingin melihat apa yang Anda buat. Tetapi berkat alat online yang rapi bernama CodePen, Anda tidak perlu khawatir tentang hal itu lagi.
CodePen.io
CodePen adalah alat gratis yang memungkinkan Anda meng-host proyek Anda secara online tanpa harus membayar sepeser pun. Untuk memulai, pergilah ke CodePen.io dan buat akun gratis.
Setelah Anda selesai melakukannya, Anda dapat membuat "Pena" dengan mengklik tombol "Pena Baru" di sudut kanan atas layar.
Setelah itu, Anda dapat menambahkan HTML, CSS, dan JavaScript apa pun ke kotak terkait. Setelah Anda mulai menambahkan beberapa kode, Anda akan dapat melihat pratinjau langsung dari apa yang Anda buat. Anda dapat memberi judul Pena pertama Anda di sudut kiri atas. Setelah mengklik "Simpan, " pertama Anda, Anda dapat dengan mudah membagikan URL halaman dengan teman, keluarga, dan rekan kerja sehingga mereka dapat melihat apa yang sedang Anda kerjakan.
Ini adalah bagaimana Pen Anda akan terlihat dengan beberapa kode di dalamnya (milik proyek Free Code Camp yang disebut Tribute Page):
Saat membuat Pena Anda sendiri, Anda harus melalui Pengaturan sebelum memulai. Ketika Anda mengklik tombol "Pena Baru", Anda akan melihat template Pena siap untuk Anda mulai memasukkan beberapa kode. Di sudut kanan atas akan ada tombol "Pengaturan". Klik itu (Anda akan melihat layar di bawah).
Di sini Anda dapat melihat tab HTML, CSS, dan JavaScript untuk menambahkan informasi tertentu. Di tab HTML, Anda dapat menambahkan informasi meta, hal-hal yang harus ada di
tab, dan sebagainya. Di bawah CSS, Anda dapat menambahkan CSS Preprocessors seperti LESS dan Sass. Tidak hanya itu, tetapi Anda dapat menambahkan CSS eksternal seperti Bootstrap dan Foundation. Di bawah tab JavaScript, Anda dapat menambahkan dalam JavaScript Preprocessor seperti Babel atau CoffeeScript. Selain itu, Anda dapat menambahkan kerangka kerja JavaScript eksternal seperti Angular, React, Lodash, D3, dan sebagainya.
Akhirnya, CodePen akan memungkinkan Anda untuk mengubah "View" yang Anda lihat. Tampilan default adalah Tampilan Editor, memungkinkan Anda untuk memasukkan kode Anda dan mendapatkan pratinjau kecil di konsol di bawah ini. Tapi, ada opsi lain juga, dengan yang sangat berguna adalah tampilan "Halaman Penuh", di mana Anda akan bisa melihat proyek seolah-olah itu tinggal di situs web. Ada beberapa Tampilan lain yang tersedia untuk beralih, ada baiknya bermain-main dengan!
CodePen benar-benar adalah alat yang rapi, dan kami hanya menyentuh permukaan kegunaannya. Ada baiknya menuju ke CodePen.io dan menggunakannya untuk bekerja pada beberapa proyek, dan kemudian, jika Anda suka, bagikan dengan teman atau rekan kerja Anda.
Apa pendapat Anda tentang CodePen? Sudahkah Anda menggunakan alat serupa? Beri tahu kami di bagian komentar di bawah!
