Becerilerinizi test edin: değerler ve birimler

Bu görevin amacı, CSS Değerleri ve Birimleri dersinde incelediğimiz bazı değerler ve birimler hakkındaki anlayışınızı kontrol etmenize yardımcı olmaktır.

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki Değerlendirme ve yardım bölümüne bakın.

Birinci Görev

bu görevde, ilk liste öğesine onaltılık renk kodları kullanılarak bir arka plan rengi verilmiştir. Göreviniz, aynı rengi farklı formatlarda kullanarak CSS'i tamamlamak ve ayrıca arka planı yarı saydam yapmanız gereken son bir liste öğeniz var.

  • İkinci liste öğesini RGB rengini kullanmalıdır.
  • üçüncüsü HSL rengini kullanmalıdır.
  • Dördüncüsü RGB rengini kullanmalı ancak alfa kanalı 0.2 olarak ayarlanmalıdır.

Onaltılık renk için dönüşümleri Bu bağlantıda bulabilirsiniz.CSS'deki değerleri nasıl kullanağınızı bulmanız gerekir.

Four list items. The first three with the same background color and the last with a lighter background.

Bitmiş öreği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

İkinci görev

Bu görevde çeşitli metin öğelerinin boyutunu ayarlamanız gerekir.

  • <h1> 50 piksel olmalıdır.
  • <h2> 2em olmalıdır.
  • <p> 16 piksel olmalıdır.
  • <h1>'in ilk kardeşi olan <p>, <h1> %120'si olmalıdır.

Some text at varying sizes.

Örneği resimde gösterildiği gibi yeniden oluşturmak için canlı kodu düzenlemeyi deneyin:

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

Üçüncü görev

Bu görevde, arka plan resmini yatay olarak ortalayacak şekilde ve kutunun üstünden %20 oranında hareket ettirmeniz gerekir.

A stat centered horizontally in a box and a short distance from the top of the box.

Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu güncellemeyi deneyin:

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

Değerlendirme veya daha fazla yardım

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler:
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.