Cara Menggunakan Codepen
Codepen merupakan salah satu Text Editor Online yang sering digunakan oleh Frontend Developer, selain sebagai Text Editor Codepen sering digunakan sebagai ajang pamer karya atau portfolio
Sebelum kita membahas mengenai Codepen, kita bahas terlebih dahulu mengenai istilah Text Editor karena Codepen sendiri erat kaitannya dengan istilah Text Editor.
Text Editor
Text Editor adalah software yang digunakan untuk menuliskan kode program.
Text Editor berbeda halnya dengan Microsft Word yang disebut juga sebagai Rich Editor.
Jika kita biasa menuliskan dokumen, surat, laporan di Microsoft Word maka untuk menuliskan kode program tidak dilakukan di Microsoft Word. Bukan karena tidak bisa melainkan tidak sesuai dengan penggunaan.
Apa alasannya?
Alasannya karena Microsoft Word ditujukan untuk penulisan dokumen bukan kode program, kemudian di Microsoft Word tidak ada fitur-fitur yang mendukung programmer untuk menuliskan kode program seperti syntax higlighting, debugging, dll. Fitur-fitur tersebut hanya tersedit di Text Editor.
Terdapat banyak Text Editor yang banyak digunakan oleh programmer, seperti:
- Visual Studio Code
- Sublime Text
- Atom
Text Editor di atas merupakan text editor yang popler dan paling banyak digunakan oleh Programmer. Selain itu, Text Editor tersebut harus diinstall di perangkat sebelum bisa menggunakannya.
Selain itu, terdapt Text Editor Online yang bisa digunakan tanpa harus melakukan instalasi di perangkat (laptop). Namun untuk menggunakan Text Editor Online syaratnya harus memiliki koneksi internet.
Salah satu Text Editor Online yang sering digunakan oleh programmer adalah Codepen.
Codepen
Codepen merupakan Text Editor yang berbasis Online.
Dengan menggunakan Codepen, kita bisa menuliskan kode program tanpa harus menginstall aplikasi terlebih dahulu ke perangkat.
Selain sebagai Text Editor Online, Codepen biasanya digunakan oleh Frontend Developer sebagai ajang untuk memamerkan karya atau portfolio mereka.
Mendaftar Codepen
Sebelum memutuskan untuk menulis kode program atau membuat karya di Codepen, alangkah lebih baiknya kita mendaftar terlebih dahulu di Codepen.io
Kita bisa saja menuliskan kode program tanpa harus mendaftar, namun jika tidak mendaftar kita tidak memiliki fitur-fitur tambahan seperti Saved, Collection, My Work, Dll
- Buka Situs Codepen.io
- Klik Menu Sign Up
- Klik Sign up melalui Twitter, GitHub, Facebook, atau Menggunakan Email
Jika memilih Sign up menggunakana Email, maka kita harus mengisi form pendaftaran:
- Your Name: Isi nama Anda
- Choose a Username: Isi username yang diinginkan
- Email: Isi email anda yang aktif
- Choose Password: Isi password yang ingin anda buat
- Klik Submit
Menggunakan Codepen
Jika sudah mendaftar atau login, kita akan diarahkan ke halaman utama dari codepen.
Untuk menulis kode program, kita terlebih dahulu membuat pen:
- Klik pen yang berada di Menu Kiri
- Kita dapat menuliskan kode program di bagian ini.
Pada halaman Pen, kita dapat menuliskan HTML, CSS, dan JavaScript.
Selain itu, kita dapat mengubah Change View dari Pen dengan cara mengakses tombol Change View lalu memilih View yang sesuai dengan keinginan kita.
Sumber:
