Alıştırma - CSS kavramlarını kullanma

  • 7 dakika

Özgeçmiş web sayfanızı şekillendirmeye başlamak istiyorsunuz. Sayfada kullandığınız çeşitli öğeler için yazı tipini seçerek ve boyutları ayarlayarak başlarsınız.

Bu modülde Visual Studio Code ve CodeSwing'in web tabanlı sürümü olan vscode.dev kullanılmaktadır. Bu araçlar geliştirme sürecini kolaylaştırmaya yardımcı olur. Aşağıdaki alıştırmaları tamamlamak için yerel yükleme gerekmez.

Proje oluştur

İlk olarak bir klasör oluşturur, araçlarınızı kurar ve vscode.dev üzerinde CodeSwing'i kullanarak bir "swing" oluşturursunuz. Bir salıncak, kodunuzun sonuçlarını otomatik olarak vscode.dev görüntüler. CodeSwing ile Microsoft Visual Studio Code'u kullanmak, gerçek zamanlı olarak gerçekleşen güncelleştirmelerin önizlemesiyle hızlı bir şekilde değişiklik yapmanıza olanak tanır.

  1. Masaüstünüzde resume adlı bir klasör oluşturun.
  2. vscode.dev'i açın.
  3. Klasör Aç'ı seçin.
  4. Daha önce oluşturduğunuz özgeçmiş klasörüne gidin ve Klasör Seç'i seçin.
  5. Sitenin dosyaları görüntülemesine izin ver sorulduğunda Dosyaları Görüntüle'yi seçin.
  6. Uzantılar düğmesini seçin.

    Visual Studio uzantıları düğmesinin ekran görüntüsü.

  7. Market'te Uzantıları Ara metin kutusuna CodeSwing yazın.
  8. CodeSwing'i yüklemek için Yükle'yi seçin.
  9. Mac'te Ctrl+Shift+P veya Cmd-Shift-P'yi seçerek Komut Paleti'ni açın.
  10. Komut Paleti'ne CodeSwing yazın ve CodeSwing: New Swing in Directory'yi seçin.
  11. Geçerli dizini (önceki adımda oluşturduğunuz dizin) kullanmak için Klasör Seç'i seçin.
  12. Temel: HTML/CSS/JavaScript'i seçin.
  13. Devam etmek için değişiklikleri kaydet istenirse Değişiklikleri kaydet'i seçin.
  14. Egzersiz sırasında bu dosyayı kullanmadığınız için JavaScript dosyasını kapatmak için script.js içindeki vscode.dev yanındaki x işaretini seçin.

Visual Studio Code yan yana iki bölüm oluşturur. Sol tarafta, HTML ve CSS'nizi girebileceğiniz düzenleyicileriniz yer alır. Sağ, kodunuzun sonuçlarını görüntüleyen bir tarayıcı gibi davranır.

HTML oluşturma

Yalnızca CSS'ye odaklanmamıza izin vermek için mevcut HTML'yi kullanıyorsunuz. HTML, CSS dosyasına başvurmak için öğesini içerir link .

  • Aşağıdaki HTML'yi index.html başlıklı pencereye kopyalayın:

    <html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Your Name</h1>
        <a href="mailto:your-email@example.com">your-email@example.com</a>

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

        <h2>Education</h2>
        <h3>School name</h3>
        <h4>Major</h4>
        <ul>
            <li>GPA: 4.0</li>
            <li>Years attended</li>
        </ul>

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

Yazı tipi türünü ve boyutunu ayarlama

Varsayılan olarak, çoğu tarayıcı Times New Roman gibi bir serif yazı tipi kullanır. Sayfa varsayılanını daha popüler bir yazı tipine ayarlamak istiyorsunuz. Ayrıca, sayfanın yazı tipinin boyutunu ve çeşitli üst bilgileri ayarlamak istiyorsunuz.

  1. style.css başlıklı dosyanın içine aşağıdaki CSS'yi ekleyerek yazı tipi ailesini geri dönüş seçenekleriyle Verdana'ya, yazı tipi boyutunu ise öğesinde html 12 piksele ayarlayın:

    html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

    kök yazı tipini ve boyutlandırmayı html güncelleştirmek için öğesini kullanıyorsunuz. html Eleman ile boyutlandırma kullanmanıza rem izin verir.

  2. Sayfanın değişikliklerle birlikte otomatik olarak güncelleştirildiklerine dikkat edin.

  3. aracılığıyla boyutlarını ayarlamak için h1 aşağıdaki CSS kodunu style.cssh4ekleyin.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem 14 piksel olan kök boyutu temel alır. Örnek olarak, bu CSS boyutunu h1 22,4 piksel olarak ayarlar.

  4. Sayfa vscode.dev'da otomatik olarak güncelleştirilir.

  5. Sonraki alıştırmada kullanacağınız pencereyi açık bırakın.

Sonuç ve sonraki adımlar

Aşağıdaki ekran görüntüsü, bu alıştırmada uyguladığınız CSS'nin sonucudur. Farklı yazı tipleri ve boyutlarıyla denemeler yapmak isterseniz CSS'yi istediğiniz gibi değiştirebilirsiniz.

Tarayıcıda işlenen son sayfanın ekran görüntüsü.