
CSS eğitimine hoş geldiniz. Bu derste CSS temel konularından ileri seviyeye ilerleyeceğiz. Derslerde HTML bildiğinizi düşünerek ilerleyeceğim için lütfen önce HTML eksiklerinizi tamamlayın.
CSS yenir mi içilir mi?
CSS yapısı nasıldır?
Temel kavramları öğrenerek başlıyoruz.
Peki CSS kodlarını sayfaya nasıl ekleriz?
Renk tanımlaması yapmak için hangi yöntemler varsa kullanabileceğiniz hepsini temel olarak öğreniyoruz.
px, em gibi birimlerin ne olduğunu işliyoruz.
Arkaplan ile ilgili özellikleri işleyerek asıl derslere başlıyoruz.
Çerçeve çizmeyi öğrenelim. Her daim gerekebilir.
Boşluk olmazsa herşey birbirine girer.
Bu da bir boşluk ama daha farklı.
Herşeyin bir genişliği ve yüksekliği olmayabilir ama bence sınırları olmalı.
Sayfamızın yazı tipini tanımlamazsak olmaz değil mi?
Sayfadaki yazılara nasıl stil veririz? Dersi izlerken uyumamanız için 2 bölümde işliyoruz.
Sayfadaki yazılara nasıl stil veririz konusunun devamı
Linklere stil vermek o kadar basit ki anlatamam.
Resim yerine simgeler kullanmaya ne dersiniz?
Sıralı ve sırasız listelere HTML tanımlamaları haricinde daha farklı şekiller verebiliriz biliyor musunuz?
Sözde class ve element ile daha fazla seçici kullanacağız.
Şeffaf, transparan olayı nasıldır? Nasıl tanımlarız?
Nasıl gölge efekti verebiliriz?
Olmazsa olmaz layout konusunu öğrenmeden ilerlemeyin. Daima lazım.
Layout konusunu öğrenmeden ilerlemeyin. Devamı.
Yanar döner butonlar yapalım mı?
@media dedikleri şey neymiş öğrenmeden CSS öğrendim demeyin.
Çizgi film gibi olmasa da basit olarak animasyon nasıl yaparız?
Geçiş efekti tanımlamak hayal gücünüze bağlı olsa da özelliklerini ve değerlerini bilmeden yapamayız.
Gazete gibi makaleyi birden fazla sütunda yayınlamaya ne dersiniz?
HTML kullanmak yerine CSS ile nasıl kolayca yaparız?
Tablolara nasıl stil verebiliriz?
Form elemanlarına stil nasıl verilir? Hayal gücünüze bağlı olmakla birlikte birkaç örnek stil vereceğim.
Resimlere nasıl stiller tanımlayabiliriz?
Sayfadaki şekilsiz gri butonları CSS ile görselleştirmeye ne dersiniz?
İnternette boşuna aramayın. CSS ile tooltip olayını nasıl yaparız onu öğreniyoruz.
Tek resmi birden fazla resimmiş gibi göstermeye ne dersiniz?
Sağda solda menü aramayın. CSS ile sizde menüler yapabilirsiniz.
CSS ile basit bir yükleniyor uygulaması yapıyoruz.
Fırından yeni çıktı sayılır. Hadi başlayalım.
Flexbox Örnek Uygulaması kaynak kodları
CSS Grid Nedir? Kullanılan terimler ne anlama geliyor?
CSS yapısı ve kullanılan özellikleri işliyoruz.
Video dersteki 1. örnek uygulamanın kaynak kodları
Video dersteki 2. örnek uygulamanın kaynak kodları
Ve sonsöz...
HTML ile bir web sayfasını yaparsınız ama CSS ile bu sayfaya düzen, görsellik, ekranlara uyumlu responsive tasarım ve diğer seçenekleri de eklemeniz gerekir. Aksi halde sayfanız düz bir yapı olmaktan öteye geçemez.
İşte bu kursta öncelikle CSS ile ilgili temel bilgilere bakıp, CSS ve CSS3 ile ilgili özellikleri ve tanımlanabilecek değerleri göreceksiniz. Ardından bazı HTML etiketlerine bu özellikleri ekleyerek uygulamalar yapacağız. Böylece CSS özellik ve değerlerini nasıl kullanabileceğinizi öğreneceksiniz. Son olarak CSS Flexbox ve CSS Grid konularını da temel düzeyde öğrenecek ve kullanabileceksiniz.
Bu kursun sonunda;
CSS Tanımlamalarını
Yazı Biçimlendirmelerini
Yazı Tipleri Tanımlamasını
Boşluklar ve çizgiler eklemeyi
Katman ve Konumlandırma Tekniğini
Resim yerine ikon fontları kullanmayı
Şeffaflık, Gölgelendirme, Animasyon ve Geçiş Efektlerini
Tablolara, resimlere, form elemanlarına stil tanımlamayı
Menü Tasarımını, Image Sprite yapmayı
CSS Grid ve Flexbox yapılarını
öğreneceksiniz.
Örnek uygulamalar ile de konuları genel tekrar edecek ve uygulama yaparak CSS öğrenmeyi pekiştireceksiniz.
GÜNCELLEMELER:
Mouse imleçleri dersi yayınlandı.
Uygulama - 8: Yükleniyor kutusu yapma dersi yayınlandı.
Temel Konular bölümüne "Ölçü Birimleri" başlıklı teorik bir makale eklendi.