HTML ve CSS
Web sayfalarının yapısı ve tasarımı
Web sayfalarını sıfırdan oluşturmayı öğren: web'in nasıl çalıştığını kavra; HTML ile metinleri, listeleri, tabloları, bağlantıları, görselleri ve formları doğru biçimde yapılandır ve anlamsal öğelerle sayfalarını herkes için erişilebilir kıl. Ardından CSS ile onlara güzel bir görünüm kazandır: seçiciler, basamaklama, kutu modeli, Flexbox, Grid, duyarlı tasarım, animasyonlar ve değişkenler. Tüm örnekler tarayıcında canlı çalışır; böylece her değişikliğin sonucunu hemen görürsün.
Kurs içeriği
HTML temelleri
BaşlangıçWeb'in nasıl çalıştığını öğren ve metin, liste, tablo, bağlantı ve görsellerden oluşan ilk sayfalarını yaz.
- 1Web nasıl çalışır: ilk HTML sayfanBir siteyi açtığında neler olduğunu öğren ve etiketler, öğeler ve özniteliklerle ilk HTML sayfanı yaz.15 dk
- 2Metin, listeler ve tablolarMetni başlıklar ve paragraflarla yapılandır, önemli olanı vurgula, bilgiyi listeler ve tablolar hâlinde düzenle.18 dk
- 3Bağlantılar ve görsellerSayfaları bağlantılarla birbirine bağla, sayfa içinde gezin ve anlamlı alternatif metinli görseller ekle.16 dk
Formlar ve anlamsal HTML
BaşlangıçKullanıcılardan bilgi toplayan formlar oluştur ve sayfalarını hem insanlar hem de ekran okuyucular için anlaşılır kıl.
CSS temelleri
OrtaSeçiciler, renkler, yazı tipleri, basamaklama ve kutu modeliyle sayfanın görünümünü yönet.
- 6CSS temelleri: seçiciler, renkler, yazı tipleri ve basamaklamaCSS kurallarının nasıl yazıldığını öğren, öğeleri seçicilerle seç; renk, birim ve yazı tipi ver ve kurallar çakıştığında hangisinin kazandığını anla.22 dk
- 7Kutu modeliHer öğenin içerik, iç boşluk, kenarlık ve dış boşluktan oluşan bir kutu olduğunu öğren, boyutları doğru hesapla ve `box-sizing` ile işini kolaylaştır.18 dk
Sayfa düzeni ve modern CSS
İleriFlexbox ve Grid ile her ekrana uyum sağlayan sayfalar kur; geçişler, animasyonlar ve CSS değişkenleriyle onları canlandır.
- 8Flexbox: öğeleri bir çizgi boyunca dizmekFlexbox ile öğeleri satır ya da sütun hâlinde diz, aralarındaki boşluğu paylaştır, onları ortala ve mevcut alana uyum sağlamalarını sağla.20 dk
- 9CSS Grid ve duyarlı tasarımCSS Grid ile satır ve sütunlardan oluşan sayfa düzenleri kur; medya sorguları ve “önce mobil” yaklaşımıyla onları her ekrana uyarla.22 dk
- 10Geçişler, animasyonlar ve CSS değişkenleriRenkleri ve boyutları CSS değişkenlerinde tut; yumuşak geçişler ve `@keyframes` animasyonlarıyla sayfaları canlandır, harekete duyarlı kullanıcıları da unutmadan.20 dk