Alıştırma - Web uygulamanızın yapısını ayarlama

  • 5 dakika

Web sitesi projeleri oluşturmanın ve yönetmenin farklı yolları vardır. Bu farklılıklardan bazıları, sahip olduğunuz belirli araçlara ve kuruluşunuzun tercihlerine bağlıdır. Web sitesi oluştururken, proje yapınızın zaman içinde değişmesi daha karmaşık hale geldiğinden sık karşılaşılan bir durum değildir. Büyük projeler genellikle daha yüksek düzeyde bakım ve dikkat gerektirir, böylece birçok kişi her şeyi düzenli tutabilir. Önemli olan kuruluş benzerliğini korumaktır ve size yardımcı olacak ortak stratejiler vardır.

Bu ünitede Visual Studio Code kullanarak küçük bir proje yapısı oluşturacaksınız. Projenin üç dosyası vardır: HTML dosyası, CSS dosyası ve JavaScript dosyası. Web sitesinin tarayıcınızda çalıştırılmasını kolaylaştırmak için bir Visual Studio Code uzantısı da eklersiniz.

Web siteniz için yeni klasör oluşturma

  1. Visual Studio Code'u açın.

    Visual Studio Code'ı açtığınızda Hoş Geldiniz sayfası açılır. Yeni bir dosya oluşturabileceğinize veya Başlangıç listesinde bir klasör açabileceğinize dikkat edin.

    Visual Studio Code Kullanmaya Başlama sayfasının ekran görüntüsü.

    Hoş Geldiniz sayfası görünmüyorsa, menüden Yardım > Karşılama'yı seçerek bu sayfayı görüntüleyebilirsiniz. (Alternatif olarak,Windows bilgisayarda Shift+Ctrl+P klavye kısayolunu veya macOS'ta Shift+Cmd+P klavye kısayolunu kullanarak veya Visual Studio Code menüsünden Komut Paletini Görüntüle'yi seçerek Hoş> sayfası. Komut Paleti görüntülendiğinde, Hoş Geldiniz sayfasını açmak > Geldiniz yazın.)

  2. Hoş Geldiniz>

    Windows işletim sistemi Klasör Aç iletişim kutusunun ekran görüntüsü.

    Bir klasörü açtığınızda, işletim sisteminin Yeni Klasör oluşturmak için bir menü seçeneği vardır.

  3. Web siteniz için yeni klasörü oluşturmak istediğiniz konuma gidin ve Yeni Klasör'e tıklayın.

  4. Klasörü simple-web sitesi olarak adlandırın ve ardından Klasör Seç'i seçin.

    Önemli

    Bir Visual Studio Code iletişim kutusu görüntülenirse, Üst klasördeki tüm dosyaların yazarlarını güven... öğesini seçin. Bu, proje klasörlerinizin otomatik kod yürütülmesine izin verip vermemesine veya bunları kısıtlamasına karar vermenizi sağlayan Çalışma Alanı Güveni özelliğidir. Klasörü yeni oluşturdunuz, böylece güvenlidir.

Bazı dosyalar oluşturma

  1. Menüden Dosya Yeni Dosya'yı>veya Windows'da Control+N veya macOS üzerinde Command+N kullanarak yeni bir dosya oluşturun.

  2. Windows'ta Control+S veya macOS üzerinde Command+S'yi seçerek dosyayı kaydedin.

  3. Dosya adı olarak girin index.html ve Kaydet'i seçin.

  4. İki dosya daha oluşturmak için önceki adımları yineleyin: main.css ve app.js. İşiniz bittiğinde, Visual Studio Code Explorer'daki basit web sitesi proje klasörü aşağıdaki dosyaları içermelidir:

    • index.html
    • main.css
    • app.js

    Visual Studio Code Gezgini görünümünde dosyalarınızın ekran görüntüsü.

Tüm HTML, CSS stilleri ve JavaScript kodunuzu tek bir dosyaya ekleyerek bir web sitesi oluşturabilirsiniz. Ancak bu alıştırmada içeriğiniz için bir HTML dosyası, stilinize yönelik bir CSS dosyası ve etkileşiminiz için bir JavaScript dosyası kullanıyorsunuz.

Üç dosya ayarlamak web sitesi projenizin düzenli kalmasına yardımcı olur. İçeriğin, stillerin ve mantığın ayrılması, aşamalı geliştirmenin bir örneğidir. JavaScript etkinleştirilmediyse veya müşterileriniz tarafından desteklenmiyorsa CSS ve HTML'niz çalışmaya devam eder. Ancak CSS müşterileriniz tarafından desteklenmiyorsa en azından HTML içeriğiniz görüntülenir.

Uzantıları veya paketleri yükleme

Uzantı marketini kullanarak Visual Studio Code'un işlevselliğini genişletebilirsiniz. Bu uzantıların topluluk tarafından geliştirilen kaynaklar olduğunu ve genellikle aynı özellik türü için çeşitli çözümler olduğunu unutmayın. Uzantıları düzenleyicinize tek tek veya komut satırını kullanarak bir kerede birkaç kez yükleyebilirsiniz.

Web geliştirme için şu anda ihtiyacınız olan tek şey tarayıcıda açık. Bu uzantı, dosya URL'sini kopyalayıp tarayıcınıza yapıştırmak yerine web sitesini varsayılan tarayıcınızda hızlı bir şekilde açmanıza yardımcı olur.

Bu uzantıyı yüklemek için aşağıdaki adımları kullanın:

  1. Dikey Etkinlik Çubuğu'nda (sol bölme) Uzantılar simgesini seçin.

  2. Arama kutusuna aç yazın, ardından TechER tarafından yayımlanan tarayıcıda aç uzantısını seçin.

  3. Yükle'yi seçtiğinizde Visual Studio Code uzantıyı yükler.

    Arama alanında 'open in' sözcüklerinin ve eşleşen uzantıların listesinin yer aldığı Visual Studio Code uzantısı kenar çubuğunu gösteren ekran görüntüsü.

  4. Etkinlik Çubuğu'ndaki üst simgeye tıklayarak Explorer'a geri dönün veya Windows'da Control+Shift-E veya macOS üzerinde Command+Shift-E tuşlarını kullanın.

Tebrikler! Yükleme ve kurulum biraz fazla zaman alır, ancak yalnızca bir kez yüklemeniz ve ayarlamanız gerekir. Artık bir web sitesi oluşturmaya hazırsınız.