Web geliştirme ile ilgili sinir bozucu şeylerden biri, projelerinizi başkalarıyla paylaşmanın kolay bir yoludur. Pek çok durumda, projenizi bir web sunucusunda barındırmanız veya tüm ilgili dosyaları gönderdiklerinizi görmek isteyen birine göndermeniz gerekir. Ancak, CodePen adında düzenli bir çevrimiçi araç sayesinde, artık hiçbir şey için endişelenmenize gerek yok.
CodePen.io
CodePen, projelerinizi hiç para harcamadan çevrimiçi ortamda barındırmanıza izin veren ücretsiz bir araçtır. Başlamak için CodePen.io adresine gidin ve ücretsiz bir hesap oluşturun.
Bunu yaptıktan sonra, ekranın sağ üst köşesindeki “Yeni Kalem” düğmesine tıklayarak bir “Kalem” oluşturabilirsiniz.
Bundan sonra, ilgili kutularına herhangi bir HTML, CSS ve JavaScript ekleyebileceksiniz. Bazı kodları eklemeye başladığınızda, oluşturduğunuz şeyin canlı bir önizlemesini göreceksiniz. İlk Kalemin sol üst köşesinde başlık kullanabilirsiniz. İlk “Kaydet” e tıkladıktan sonra, sayfanın URL’sini arkadaşlarınızla, ailenizle ve iş arkadaşlarınızla paylaşabilirsiniz; böylece neyin üzerinde çalıştığınızı görebilirler.
Pen'inizin içinde bazı kodlar görünecektir (Tribute Page adlı bir Ücretsiz Kod Kampı projesinin izniyle):
Kendi Kalenizi yaratırken, başlamadan önce Ayarlar’dan geçmek isteyeceksiniz. “Yeni Kalem” düğmesine tıkladığınızda, bazı kodları girmeye başlamanız için bir Kalem şablonu hazır görmelisiniz. Sağ üst köşede bir "Ayarlar" düğmesi olacaktır. Buna tıklayın (aşağıdaki ekranı görmelisiniz).
Burada, belirli bilgileri eklemek için HTML, CSS ve JavaScript sekmelerini inceleyebilirsiniz. HTML sekmesinde, girmesi gereken şeyler gibi meta bilgileri ekleyebilirsiniz.
sekme vb. CSS altında, LESS ve Sass gibi CSS Ön İşlemcileri ekleyebilirsiniz. Sadece bu değil, Bootstrap ve Foundation gibi harici CSS'ler de ekleyebilirsiniz. JavaScript sekmesi altında, Babel veya CoffeeScript gibi bir JavaScript Önişlemcisi ekleyebilirsiniz. Ek olarak, Angular, React, Lodash, D3 vb. Gibi harici JavaScript çerçeveleri ekleyebilirsiniz.
Son olarak, CodePen aradığınız “Görünümü” değiştirmenize izin verecektir. Varsayılan görünüm, kodunuzu girmenize ve aşağıdaki konsolda küçük bir önizleme almanıza izin veren Editör Görünümü'dür. Ancak, özellikle kullanışlı olanı “Tam Sayfa” görünümünde başka bir seçenek var, bir projeyi bir web sitesinde canlımış gibi göreceksiniz. Geçmeye hazır bir avuç dolusu görüş var, onunla oynamaya değer!
CodePen gerçekten temiz bir araçtır ve sadece kullanımının yüzeyine dokunduk. CodePen.io'ya gitmeye ve birkaç projede çalışmak için kullanmaya değer. Daha sonra, isterseniz, arkadaşlarınızla veya iş arkadaşlarınızla paylaşın.
CodePen hakkında ne düşünüyorsunuz? Benzer bir araç kullandınız mı? Aşağıdaki yorumlar bölümünde bize bildirin!
