CSS'yi Öğrenme'ye hoş geldiniz.

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.