Bu kursta CSS'nin temel ilkeleri açık ve kolay anlaşılır parçalara ayrılmaktadır. Önümüzdeki birkaç modülde CSS'nin temel özelliklerinin nasıl çalıştığını ve bunları projelerinizde etkili bir şekilde nasıl kullanabileceğinizi öğreneceksiniz. Modüller arasında gezinmek için "CSS öğrenin" logosunun yanındaki menü bölmesini kullanın.
Kutu modeli, basamak ve belirginlik, flexbox, ızgara ve z-endeksi gibi CSS temellerini öğreneceksiniz. Sizi her tür kullanıcı arayüzünü üstlenmeye hazır kapsamlı bir ön uç geliştiricisi yapmak için işlevler, renk türleri, gradyanlar, mantıksal özellikler ve devralma hakkında da bilgi edineceksiniz.
Her modül, bilginizi test etmeniz için etkileşimli demolar ve kendi kendine değerlendirmelerle doludur. Okuma ve demo yoluyla öğrenmenin yanı sıra, her konuyu öğrenip bilginizi genişletmeye devam etmek için bir podcast bölümü de bulunuyor.
Bu kurs, hem yeni hem de ileri düzey CSS geliştiricileri için hazırlanmıştır. CSS hakkında baştan sona genel bir fikir edinmek için serinin üzerinden geçebilir veya belirli stil konuları için referans olarak kullanabilirsiniz. Genel olarak web geliştirme alanında yeni olanlar için, işaretlemeyi nasıl yazacağınızı ve stil sayfalarınızı nasıl bağlayacağınızı öğrenmek için HTML Öğrenme bölümüne göz atın.
Öğrenecekleriniz:
Kutu Model
CSS'de gösterilen her şey bir kutudur. Bu nedenle, CSS Kutu Modeli'nin nasıl çalıştığını anlamak CSS'nin temel temelini oluşturur.
Seçiciler
CSS'yi bir öğeye uygulamak için o öğeyi seçmeniz gerekir. CSS bunu yapmanın birkaç farklı yolunu sunar. Bunları bu modülde inceleyebilirsiniz.
Şelale
Bazen bir öğeye iki veya daha fazla rekabet eden CSS kuralı uygulanabilir. Tarayıcının hangisinin kullanılacağını ve bu seçimi nasıl kontrol edeceğinizi öğrenin.
Spesifik olma derecesi
Bu modülde, bu şelalenin önemli bir parçası olan belirlilik düzeyi daha ayrıntılı bir şekilde ele alınmaktadır.
Devralma
Bazı CSS mülkleri için bir değer belirtmediğiniz takdirde özellikleri devralır. Bu modülde bunun nasıl çalıştığını ve avantajlarından nasıl yararlanabileceğinizi öğrenin.
Renk
CSS'de rengi belirtmenin birkaç farklı yolu vardır. Bu modülde en yaygın kullanılan renk değerleri incelenmektedir.
Birimleri Boyutlandırma
Web'in esnek aracıyla çalışarak CSS kullanarak öğeleri nasıl boyutlandıracağınızı öğrenin.
Düzen
Bileşen veya sayfa düzeni oluştururken seçebileceğiniz çeşitli düzen yöntemlerine genel bakış.
Esnek Kutu
Flexbox, öğe gruplarını tek boyutta düzenlemek için tasarlanmış bir düzen mekanizmasıdır. Bu modülde reklam öğelerini nasıl kullanacağınızı öğrenin.
Izgara
CSS Izgara Düzeni, satır ve sütunlardaki düzeni kontrol eden iki boyutlu bir düzen sistemi sağlar. Izgaranın sunduğu tüm olanakları keşfedin.
Mantıksal Özellikler
Mantıksal, akışa bağlı özellikler ve değerler ekranın fiziksel şekliyle değil, metin akışıyla bağlantılıdır. Bu yeni CSS yaklaşımından nasıl yararlanacağınızı öğrenin.
Boşluk
Kullanmakta olduğunuz düzen yöntemi ve oluşturmakta olduğunuz bileşen için en iyi aralık belirleme yöntemini nasıl seçeceğinizi öğrenin.
Sahte öğeler
Sözde öğe, daha fazla HTML eklemek zorunda kalmadan fazladan bir öğe eklemeye veya hedeflemeye benzer. Çeşitli rollere sahiptirler ve bu modülde onlar hakkında bilgi edinebilirsiniz.
Sahte sınıflar
Sözde sınıflar, CSS'yi durum değişikliklerine göre uygulamanıza olanak tanır. Bu, tasarımınızın geçersiz e-posta adresi gibi kullanıcı girişlerine tepki verebileceği anlamına gelir.
Sınırlar
Kenarlık, kutularınız için bir çerçeve sağlar. CSS kullanarak kenarlıkların boyutunu, stilini ve rengini nasıl değiştireceğinizi öğrenin.
Gölgeler
CSS'de metne ve öğelere gölge eklemenin çeşitli yolları vardır. Her bir seçeneği nasıl kullanacağınızı ve bu seçeneklerin hangi görevler için tasarlandığını öğrenin.
Odaklanma
Web uygulamalarınızda odaklanmanın önemini anlayın. Odağı nasıl yöneteceğinizi ve sayfanızdaki yolun hem fare hem de klavye kullanarak gezinen kullanıcılara uygun olmasını nasıl sağlayacağınızı öğreneceksiniz.
Z-endeksi ve yığma bağlamlar
Z-endeksi ve yığma bağlamını kullanarak öğelerin birbirinin üstüne katman olarak yerleştirildiği sırayı nasıl kontrol edeceğinizi öğrenin.
İşlevler
CSS'de çeşitli yerleşik işlevler bulunur. Bazı temel işlevler ve bunları nasıl kullanacağınız hakkında bilgi edinin.
Renk geçişleri
Bu modülde, CSS'de sunulan çeşitli renk geçişlerinin nasıl kullanılacağını öğreneceksiniz. Gradyanlar, grafik uygulamalarının resim oluşturmasına gerek olmadan birçok faydalı efekt oluşturabilir.
Animasyonlar
Animasyon, etkileşimli öğeleri vurgulamanın ve tasarımlarınıza ilgi ve eğlence eklemenin harika bir yoludur. CSS ile animasyon efektlerini nasıl ekleyeceğinizi ve kontrol edeceğinizi öğrenin.
Filtreler
CSS'deki filtreler sayesinde, yalnızca bir grafik uygulamasında mümkün olduğunu düşündüğünüz efektleri uygulayabilirsiniz. Bu modülde kullanabileceğiniz özellikleri keşfedebilirsiniz.
Karma Modlar
İki veya daha fazla katmanı karıştırarak kompozisyon efektleri oluşturun ve karışım modlarıyla ilgili bu modülde beyaz arka plana sahip bir resmin nasıl izole edileceğini öğrenin.
Listeler
Liste, yapısal olarak liste öğeleriyle dolu bir liste kapsayıcısı öğesinden oluşur. Bu modülde, bir listenin tüm bölümlerinin stilini nasıl oluşturacağınızı öğreneceksiniz.
Geçişler
Bir öğenin durumları arasındaki geçişleri nasıl tanımlayacağınızı öğrenin. Geçişleri kullanarak kullanıcı etkileşimi için görsel geri bildirim sağlayarak kullanıcı deneyimini iyileştirin.
Taşma
Taşma, belirli bir üst boyuta sığmayan içerikleri ele alma şeklinizdir. Bu modülde, kalıpların dışına çıkarak taşan içeriği nasıl biçimlendireceğinizi öğreneceksiniz.
Arka planlar
CSS kullanarak kutuların arka plan stilini nasıl ayarlayacağınızı öğrenin.
Metin ve yazı
Web'de metin stilini nasıl ayarlayacağınızı öğrenin.
Sonuç ve sonraki adımlar
Sonraki adımlarınızı atmanıza yardımcı olacak diğer kaynaklar.
CSS'yi öğrenmeye hazır mısınız? Haydi başlayalım.