Merhaba.

Project Zeta kapsamında 14 günlük CSS3 yolculuğumuza başlıyoruz.

Bir önceki HTML yazılarımı anlatırken WebMatrix’i kullanmıştım. Ancak Project Zeta kapsamında size pek çok yeni IDE tanıtmaya farklı teknolojiler göstermeye çalışacağım.

CSS3 yazılarımızı yazarken Microsoft’un bizlere sağladığı Visual Studio Code Editörünü kullanacağız.

VS Code Kurulumu

Öncelikle aşağıdaki linkten indirme işlemini gerçekleştirelim.

Visual Studio Code İndir

Gelen Setup Dosyasını Çalıştıralım.

Gerekli işlemleri yapıp program kurulumunu tamamlayalım.

Şimdi Masaüstünde İconu varsa çalıştıralım VS Code programını. Eğer yok ise arama çubuğuna Visual Studio Code yazabilirsiniz.

Bu IDE’nin çok güçlü bir eklenti desteği var. Yazacağım her programlama diliyle ilgili neredeyse bir eklentiye sahip. Öncelikle bunlardan şu anda işimize yarayacak olanların kurulumu ile başlayacağız.

IDE ne demek sorusu aklınıza gelebilir kısaca açıklayayım.

Bilgisayar programcılarının hızlı ve rahat bir şekilde program geliştirebilmesini amaçlayan, geliştirme sürecini organize edebilen birçok araç ile birlikte geliştirme sürecinin verimli kullanılmasına katkıda bulunan araçların tamamını içerisinde barındıran bir yazılım türüdür.
 
Tümleşik geliştirme ortamlarında olması gerekli en temel özellikler aşağıdaki gibidir:
 
Programlama diline göre sözdizimi renklendirmesi yapabilen kod yazım editörü.
 
Kod dosyalarının hiyerarşik olarak görülebilmesi amacıyla hazırlanmış gerçek zamanlı bir dizelge.
 
Tümleşik bir derleyici, yorumlayıcı ve hata ayıklayıcı.
 
Yazılımın derlenmesi, bağlanması, çalışmaya tümüyle hazır hale gelmesi ve daha birçok ek işi otomatik olarak yapabilmek amacıyla küçük inşa araçları.
 
İşte VS CODE da Visual Studio’nun desteğini ve ondan biraz daha esnek olan yapısıyla güçlü bir IDE olarak karşımıza çıktı. 
 

VS CODE Farklı Eklentiler Ekleme

Patch yükleme aracına tıkladığımızda sağ tarafta arama bölümü açılacaktır.
 
Bizim şu anda ihtiyacımı olan HTML 5 eklentisi.
Gördüğünüz gibi bir çok eklentiyi listeledi. Hangisini kullanmak istiyorsak Install Seçeneğine tıklayıp uyguluyoruz. Kullanmak istediğiniz farklı eklentileri burada aratıp bulup yükleyebilirsiniz.
 
Peki eklentiler bizim ne işimize yarıyacak sorusu aklınıza gelebilir. Her dilin belli bir syntax yapısı vardır. Kod tamamlama, kodları belli hiyerarşide renklendirme gibi işleri bu eklentiler sayesinde yapabiliriz. Buda bir geliştiricinin işlerini çok fazla kolaylaştıran önemli bir etkendir.
 
Birde CSS eklentisini kuralım. 
 

VS CODE Proje Oluşturma

 
Şimdi bir projeye başlayabiliriz.
 
İstediğiniz yerde şöyle bir klasör oluşturalım CSS3 Eğitimleri. Masaüstünde oluşturabilirsiniz. 
 
 
Şu anda klasörümüz listelenmiş oldu. İçinde eğer dosyalarımız olsaydı görüntülenebilecekti. 
 
Şimdi öncelikle bir index.html dosyası oluşturalım.
 
 
Artık kodlamaya hazırız. 
 
Kod ekranında öncelikle html:5 yazıp Enter tuşuna basarak temel HTML yapısını otomatik olarak oluşturalım.
 
 
 
Body e bir satır yazdım. 
 
Bunu nasıl çalıştırabileceğiz ona bakalım. CTRL+S yardımı ile üzerinde çalıştığınız dosyayı kayıt edebilirsiniz.
 
Daha sonra oluşturduğumuz klasör içinde index.html dosyasını çalıştırarak projemizin varsayılan tarayıcımızda açılmasını sağlayabiliriz.
 
WebMatrixten farklı olarak Localhost bilgimizin tamamının gözüktüğünü adres çubuğunda görebiliriz.
 
Bugün VS CODE kurulumu ve birazda dosya yapısını öğrenmiş olduk yarından itibaren CSS3 kodlamayla devam ediyor olacağız.
 
Kolay gelsin.