Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir konuşmacının Visual Studio Code'nin kurulumundan başlayarak temel kullanımını adım adım gösterdiği kapsamlı bir eğitim içeriğidir.
- Video, Visual Studio Code'nin doğru platformdan indirilmesi ve kurulumu ile başlayıp, tema seçimi, ekran boyutu ayarlama ve arayüzün Türkçe diline çevrilmesi gibi temel ayarları göstermektedir. Ardından web geliştirme aracının arayüzü, sol panel, araç çubukları ve otomatik kaydetme özelliği tanıtılmaktadır. Son olarak, "Visual Studio Caymap", "Live Server" ve "Code Snap" gibi çeşitli uzantıların yükleme ve kullanım örnekleri detaylı olarak anlatılmaktadır.
- Video özellikle HTML ve CSS dersleri kapsamında Visual Studio Code kullanmak isteyenler için faydalı bilgiler içermektedir. Code Snap ve Live Server uzantılarının kullanımı, tema değiştirme, açık-koyu mod seçimi ve metin düzenleyici ayarları gibi pratik bilgiler de paylaşılmaktadır.
- 00:01Visual Studio Code Kurulumuna Giriş
- Visual Studio Code kurulumu yapılacak.
- Google'da "visual studio code" yazıldığında birden fazla platform çıkacaktır.
- Kurulum için "code.visualstudio.com" veya "microsoft.com" sitelerinden indirilebilir.
- 00:27Kurulum Seçenekleri
- İki farklı Visual Studio sürümü vardır: masaüstü uygulaması geliştirme için ve HTML/CSS ders kapsamı için kod editörü.
- HTML/CSS ders kapsamı için kod editörü indirilecektir.
- İndirme işlemi işletim sistemi türüne göre otomatik olarak tanımlanır.
- 01:17Kurulum İşlemi
- İndirilen dosyaya çift tıklayarak kurulum başlatılır.
- Kurulum sırasında standart kurulum seçeneği ve masaüstünde ikon oluşturma seçeneği bulunur.
- Kurulum tamamlandıktan sonra masaüstünde bir ikon oluşturulur.
- 02:13Visual Studio Code Arayüzü
- Yeni açıldığında tema seçimi yapılabilir.
- Tema ayarları "Ayarlar" menüsünden "Temalar" kısmından yapılabilir.
- Arayüzdeki ikonlar Türkçe dil desteği için yardımcı olacaktır.
- 03:10Arayüzü Türkçe Yapma
- Arayüz İngilizce olarak gelir.
- Türkçe dil desteği için sol taraftaki "Uzantılar" bölümüne tıklanır.
- Arama motoruna "Turkish language" yazarak Türkçe dil desteği indirilir ve arayüz yeniden başlatılır.
- 03:56Arayüz Tanıtımı
- Sol panelde gezgin kısmından dosya açma imkanı sunuluyor.
- Sitenin klasör dosyasını açarak otomatik arayüzde işlem yapma imkanı sağlanıyor.
- Üst kısımda araç çubukları mevcut ve buradan ayarlar yapılabilir.
- 04:14Otomatik Kaydetme Ayarı
- Başlangıç olarak yapılan her değişikliğin otomatik kaydedilmesi için dosya bölümünden otomatik kaydet seçeneği açık bırakılmalı.
- Olası bir durumda çarpıya basıp kapatılabilir veya bilgisayar kapanabilir, bu nedenle en son durumun kaydedilmesi daha sağlıklı olacaktır.
- 04:37Uzantılar ve Eklentiler
- Uzantılar bölme kısmında eklentiler için alan bulunuyor.
- Dil çalışırken diller için kolaylık sağlayacak eklentiler kullanılabilir.
- HTML'de otomatik tag'lar için eklentiler indirilebilir.
- 05:03Klasör Oluşturma
- Gezin kısmına tıklayıp sol menüden klasör aç seçeneği ile yeni bir klasör oluşturulabilir.
- Masaüstünde "web" adında büyük harflerle bir klasör oluşturulabilir.
- Klasör seçildikten sonra, bu klasörde çalışılacağı belirtilir.
- 05:40Dosya Oluşturma
- İki tane alan bulunuyor: klasör oluşturma ve yeni dosya oluşturma.
- Sitemizi barındıracak yapıların isimlendirmesi klasörde oluşturulur.
- Dosya oluştururken son uzantısı değiştirilebilir (örneğin index.html).
- 06:42Otomatik Tamamlayıcı Eklentisi
- Uzantılar bölümünden "auto close start" eklentisi indirilebilir.
- Bu eklenti sayesinde HTML kodları daha hızlı tamamlanabilir.
- Shift+Ünle tuşuna basarak enter diyerek HTML'in tüm iskeleti otomatik olarak getirilebilir.
- 08:02Visual Studio'da Otomatik Kısayollar
- Sayfada bir başlık etiketi oluşturmak için Ctrl+C ile kopyalayıp Ctrl+V ile yapıştırma işlemi zaman alabilir.
- Visual Studio'da otomatik kısayolları gösteren "Visual Studio Caymap" uzantısı indirilebilir.
- Bu uzantı sayesinde Ctrl+D tuş kombinasyonu ile satırı aşağı satıra kopyalayabilir, birden fazla seçeneği de Ctrl+D ile çoğaltabilirsiniz.
- 09:21Live Server Uzantısı
- Live Server anlık görüntüleyici uzantısı, kod değişikliklerini anlık olarak görüntülemek için kullanılır.
- Normalde site çıktısını görmek için sağ tıklayıp çalıştırabilir veya B klasöründeki indeks dosyasını açabilirsiniz.
- Live Server uzantısı ile sağ tıklayıp "Open with Live Server" seçeneği ile otomatik çalıştırabilir, böylece yapılan her değişiklik anında görüntülenir.
- 10:49Code Snap Uzantısı
- Code Snap uzantısı, kodunuzun ekran görüntüsünü almanızı sağlar.
- Yazılımcılar genellikle bu uzantıyı kullanır.
- Uzantı yüklendikten sonra kod bloğunu kapatıp ekran görüntüsü alabilirsiniz.
- 11:24Code Snap Kullanımı
- Kod bloğunun ekran resmini almak için sağ tıklayıp kodu komple seçim ile ilgili alanı seçebilirsiniz.
- Code Snap özelliği ile kodun çıktısını alabilir, istediğiniz arkadaşınızla paylaşabilir veya farklı bir yere kaydedebilirsiniz.
- Kaydedilen görüntüyü masaüstüne kaydedebilir ve ismini değiştirebilirsiniz.
- 12:01Ayarlar Bölümü
- Ayarlar kısmından tema değiştirebilir, açık veya koyu renk seçeneğini belirleyebilirsiniz.
- Uzantılar bölümünde Code Snap'in dış çerçevesinin kalınlığını ayarlayabilirsiniz.
- Dış çerçeve rengini değiştirebilir, beyaz, siyah veya gri yakın bir ton seçebilirsiniz.
- 13:13Live Server Özellikleri
- Live Server, anlık görüntüleri sağlayan önemli bir yapıdır.
- Live Server Chrome uzantısında çalışır, ancak Microsoft Edge, Mozilla veya Opera gibi farklı arama motorlarında da açılabilir.
- Live Server'ı hangi tarayıcıda çalıştıracağını ayarlar bölümünden özelleştirebilirsiniz.
- 14:31Metin Düzenleyici Ayarları
- Metin düzenleyici kısmında yazı fontunu büyütebilir veya küçültebilirsiniz.
- Ctrl+Artı tuşuyla yakınlaştırıp, Ctrl+Eksi tuşuyla uzaklaştırabilirsiniz.
- Yazı boyutunu, kalınlığını (bold) ve yazı tipini ayarlar kısmından düzenleyebilirsiniz.
- 15:36Uzantı Kullanımı ve Sonuç
- Yazılım çalışırken birçok kütüphaneyi kullanmanız gerekecektir ve bunlara güvenmek zorundasınız.
- Video, Live Server'ın indirilmesini, genel ayarlamaların düzenlenmesini ve uzantıların indirilmesini ve düzenlenmesini içermektedir.
- Bu işlemlerden sonra kodlamaya başlayabilirsiniz.