CodePen Nedir? | KeremCan.Org

CodePen Nedir?

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.

CodePen Nedir? - Kerem Can KATIRCI

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 Nedir? - Kerem Can KATIRCI

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.

 

CodePen Nedir? - Kerem Can KATIRCI

 

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.

 

CodePen Nedir? - Kerem Can KATIRCI

 

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. 

CodePen Nedir? - Kerem Can KATIRCI

 

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.

Etiketler
Yorumlar (0)
Yorum Yap
Çok Okunanlar
CodePen Nedir?

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 pa... Okumaya devam...


Değişkenler

Değişkenler, girdiğimiz değerleri alan veya programın çalışmasıyla bazı değerlerin atandığı veri tutuculardır. Okumaya devam...


HTML ile İlk Sayfam

HTML Nedir?” dersinde kodlarımızı yazmak için herhangi bir HTML editörüne ihtiyacımız olmadığına değinmiştik fakat kodlarımızı hem daha okunaklı hem de daha hızlı y... Okumaya devam...


Python 3 ile Programlamaya Giriş

Python, Hollandalı bilgisayar programcısı Guido Van Rossum tarafından yazılmış bir programlama dilidir. Geliştirilmesine 1990 yılında başlanan Python, pek çok programlama diline göre daha kolay öğrenilebilen bir yapıya s... Okumaya devam...


HTML Nedir?

HTML yani “Hyper Text Markup Language”, web sayfaları oluşturmak için kullanılan standart bir biçimlendirme dilidir. Bu ders ile HTML derslerine giriş yaparak, HTML hakkında bilgil... Okumaya devam...

Reklam

Buraya reklam verebilirsiniz. Detaylı bilgi için lütfen iletişime geçiniz.