Salah satu daripada banyak perkara yang mengecewakan tentang pembangunan web tidak mempunyai cara mudah untuk berkongsi projek anda dengan orang lain. Dalam banyak kes, anda perlu menganjurkan projek anda di pelayan web atau menghantar semua fail yang sepadan kepada seseorang yang ingin melihat apa yang telah anda buat. Tetapi terima kasih kepada alat dalam talian yang bernama CodePen, anda tidak perlu bimbang tentang apa-apa lagi.
CodePen.io
CodePen adalah alat percuma yang akan membolehkan anda menjadi tuan rumah projek anda dalam talian tanpa perlu membayar sepeser pun. Untuk bermula, pergi ke CodePen.io dan buat akaun percuma.
Sebaik sahaja anda telah melakukannya, anda boleh membuat "Pen" dengan mengklik butang "Pen" di sudut kanan atas skrin.
Selepas itu, anda akan dapat menambah HTML, CSS, dan JavaScript ke kotak yang sama. Sebaik sahaja anda mula menambahkan dalam beberapa kod, anda akan dapat melihat pratonton langsung tentang apa yang anda buat. Anda boleh menamakan Pen pertama anda di sudut kiri atas. Selepas anda mengklik pada "Simpan" pertama anda, anda boleh berkongsi URL halaman dengan kawan, keluarga dan rakan sekerja supaya mereka dapat melihat apa yang sedang anda kerjakan.
Inilah cara Pen anda akan melihat dengan beberapa kod di dalamnya (ihsan projek Kem Kod Percuma yang dipanggil Halaman Tribute):
Apabila mencipta Pen anda sendiri, anda akan mahu melalui Tetapan sebelum bermula. Apabila anda mengklik pada butang "Pen", anda akan melihat template Pen sedia untuk anda mula memasuki beberapa kod. Di sudut kanan atas akan menjadi butang "Tetapan". Klik pada itu (anda harus melihat skrin di bawah).
Di sini, anda boleh melalui tab HTML, CSS, dan JavaScript untuk menambah maklumat tertentu. Dalam tab HTML, anda akan dapat menambah maklumat meta, perkara yang perlu masuk
tab, dan sebagainya. Di bawah CSS, anda akan dapat menambah CSS Preprocessor seperti LESS dan Sass. Bukan itu sahaja, tetapi anda boleh menambah CSS luaran seperti Bootstrap dan Yayasan. Di bawah tab JavaScript, anda boleh menambah dalam Progresif JavaScript seperti Babel atau CoffeeScript. Di samping itu, anda boleh menambah dalam rangka kerja JavaScript luaran seperti Angular, React, Lodash, D3, dan sebagainya.
Akhirnya, CodePen akan membolehkan anda menukar "Lihat" yang anda lihat. Pandangan lalai ialah Pandangan Editor, membolehkan anda memasukkan kod anda dan mendapatkan pratonton kecil di konsol di bawah. Tetapi, terdapat pilihan lain juga, dengan pandangan yang sangat berguna sebagai "Halaman Penuh", di mana anda akan dapat melihat sebuah projek seolah-olah ia hidup di laman web. Terdapat segelintir Views lain yang tersedia untuk beralih kepada, ia bernilai bermain dengan!
CodePen benar-benar alat yang kemas, dan kami hanya menyentuh permukaan kegunaannya. Ia bernilai menuju CodePen.io dan menggunakannya untuk bekerja pada beberapa projek, dan kemudian, jika anda merasa seperti itu, kongsi dengan rakan atau rakan sekerja anda.
Apa pendapat anda mengenai CodePen? Adakah anda menggunakan alat yang sama? Beritahu kami di bahagian komen di bawah!
