CodePen, front end web geliştiricileri arasında en yaygın kullanılan kod editörlerinden biridir. CodePen ile kodlar yazabilir, yazılan kodların sonucunu “real-time preview” özelliği sayesinde anlık olarak görebilir ve paylaşabiliriz.

Kısaca geliştiriciler için önemli ilham kaynaklarından ve sosyal ağlardan biri olan CodePen, kod bilgisini geliştirmek isteyenler için bulunmaz bir nimet.

Buraya tıklayarak CodePen’e ücretsiz olarak üye olabilirsiniz.

CodePen profiliniz portföyünüz gibidir. CodePen’in geliştiriciler için sunduğu yararlı, ekip çalışmasına uygun ve eğitim amaçlı modları vardır.

CodePen ücretsiz versiyonu üç tip içerik (Pen, Project ve Post) yayınlamanıza izin verir.

“Pen”, HTML, CSS ve JavaScript kullanarak yapabilceğimiz tek sayfadan oluşan içerikleri kapsar. CodePen’de en çok kullanılan tiptir.

“Project” ise adından da anlaşılacağı gibi fazla sayfadan oluşan projeler oluşturmamızı ve projede kullanılacak ögeleri CodePen üzerinde barındırmamızı sağlar. Pen’lerden en büyük farkı kullanıcıya depolama alanı sunmasıdır. Fakat ücretsiz versiyon tek bir proje oluşturmaya izin vermektedir.

“Post” sayfaları ile bilgi paylaşımı için yazılar, makaleler vb. gibi içerikler paylaşabilirsiniz. 

Yeni Bir “Pen” Oluşturmak 
1. Sitenin sağ üst kısmında bulunan “Create” sekmesine tıklıyoruz ve oluşturacağımız içeriğin tipini seçiyoruz ve editörümüzü açıyoruz.

2. Editörümüz açıldıktan sonra sağ üstte bulunan “Settings” sekmesinden oluşturacağımız sayfanın ayarlarının yapılması gerekmektedir. Bu aşamada CSS ve JavaScript dosyalarının linkleri eklenir, varsa diğer ayarlar yapılır ve kaydedilir.

3. “Change View” sekmesinde görünüm ayarları mevcuttur. “Editor View” kodların yazıldığı, “Details View” çalışmamız ile ilgili bilgilerin bulunduğu, gelen yorumların bulunduğu, “Full Page” çalışmamızın CodePen içerisindeki tam ekran halinin bulunduğu, “Debug Mode” ise çalışmamızı tarayıcı içinde tam ekran görerek konsol ekranından hataları takip etmemize olanak sağlayan kısımdır. 

4. “Fork” herhangi bir kullanıcı tarafından oluşturulan bir çalışmanın olduğu gibi kopyalanmasıdır. Bu kopyalama işlemi sayesinde diğer kullanıcıların çalışmalarını geliştirebilir, hatalarını giderebilirsiniz.
5. Sağ altta yer alan “Share” sekmesi yardımı ile çalışmanızı paylaşabilirsiniz, “Export” sekmesindeki seçenekler ile isterseniz GitHub Gist profilinize ekleyebilirsiniz, bilgisayarınıza indirebilirsiniz ya da sitenize yaptığınız çalışmanızı ekleyebilirsiniz. 

See the Pen Aziz SANCAR | Tribute Page by Kerem Can KATIRCI (@keremcan) on CodePen.

CodePen ile ilgili dökümantasyon sayfasına buradan ulaşabilirsiniz...

Bu yazımda CodePen’in basitçe anlatmaya çalıştım. CodePen sadece burada yazdıklarımdan oluşan bir sistem değildir, kendinizi geliştirebileceğiniz, yaptığınız hataları diğer geliştiriciler sayesinde daha erken görebileceğiniz ve farklı bakış açılarına rahatlıkla ulaşabileceğiniz bir sistemdir.