Web temelleri

45 kurs, 730 ders. Tarayıcıda gerçek Kali Linux labı.

Web nasıl çalışır: HTTP, DNS, TLS (Seviye 101, 17 ders): HTTP, tarayıcı, sunucu, DNS ve çerezler.
Tarayıcı geliştirici araçları (Seviye 101, 15 ders): Firefox geliştirici araçlarıyla bir sayfanın HTML’ini, stillerini, ağ trafiğini ve depolamasını inceleyip hataların yerini bulmayı öğrenirsin.
HTML temelleri (Seviye 101, 19 ders): Etiketler, sayfa yapısı, formlar ve erişilebilirlik.
CSS temelleri (Seviye 101, 21 ders): Seçiciler, kutu modeli, düzen ve duyarlı tasarım.
JavaScript temelleri (Seviye 101, 20 ders): Değişkenler, fonksiyonlar, diziler ve nesneler.
JavaScript alıştırmaları (Seviye 101, 15 ders): Temel JavaScript bilgini kısa, gerçek problemlerle pekiştirir; her bölümde öğrendiklerini kendi başına çözdüğün bir görevde birleştirirsin.
İlk web siteni yap ve yayınla (Seviye 101, 13 ders): HTML, CSS ve biraz JavaScript ile çok sayfalı bir kişisel site planlar, kurar, sınar ve lab sunucusunda yayınlarsın.
HTTP derinlemesine: yöntemler, başlıklar, gövde (Seviye 201, 18 ders): HTTP iletilerini curl ve netcat ile elle yazıp okur; yöntemlerin, başlıkların ve gövde biçimlerinin gerçekte nasıl çalıştığını görürsün.
Web sunucusu temelleri: siteyi yayınlamak (Seviye 201, 18 ders): Statik bir siteyi önce Python’un yerleşik sunucusuyla, sonra Nginx ile yayınlar; adresleri, yönlendirmeleri, günlükleri ve HTTPS’i ayarlarsın.
HTML formları derinlemesine (Seviye 201, 17 ders): Doğru giriş türleri, etiketler, gruplar ve tarayıcı doğrulamasıyla kullanışlı formlar kurar, formun sunucuya nasıl gittiğini uçtan uca izlersin.
Anlamsal HTML ve arama motorları (Seviye 201, 16 ders): Sayfayı doğru öğelerle yapılandırır; başlık sırasını, üst verileri ve yapılandırılmış veriyi düzenleyerek sayfayı hem insanlar hem makineler için anlaşılır kılarsın.
CSS düzeni: Flexbox ve Grid derinlemesine (Seviye 201, 19 ders): Flexbox ve Grid’in hizalama, boyutlandırma ve yerleştirme kurallarını tek tek dener, gerçek sayfa düzenlerini sağlam biçimde kurarsın.
Duyarlı tasarım: her ekrana uyan sayfalar (Seviye 201, 16 ders): Önce-mobil yaklaşımla esnek yazı, görsel ve düzen kurar; kırılma noktalarını içerikten seçer, kapsayıcı sorgularıyla bileşenleri bağımsız uyarlarsın.
JavaScript: DOM ve fetch (Seviye 201, 19 ders): Sayfayı değiştirmek, olaylar ve sunucuyla konuşmak.
Node.js temelleri: sunucu tarafında JavaScript (Seviye 201, 19 ders): Node.js ile dosya okur, komut satırı aracı yazar, npm paketlerini yönetir ve küçük bir HTTP sunucusu kurarak JavaScript’i tarayıcı dışında kullanırsın.
React temelleri ve güvenli bileşen yazımı (Seviye 201, 18 ders): Kullanıcı arayüzlerini bileşenlerle kurar, React’te sık görülen güvenlik hatalarından kaçınırsın.
REST API’leri: kullanmak ve yazmak (Seviye 201, 18 ders): curl ve küçük betiklerle bir REST API’yi keşfeder, kaynakları okuyup değiştirir, sonra kendi basit API’ni yazıp belgelersin.
Web erişilebilirliği temelleri (Seviye 201, 16 ders): Ekran okuyucu ve klavyeyle sayfaları kendin dener; WCAG ilkelerine göre metin, renk, form ve gezinme sorunlarını bulup düzeltirsin.
Web hata ayıklama görevleri (Seviye 201, 15 ders): Bozuk sayfalar, kaymış düzenler, çalışmayan betikler ve hatalı istekler içeren kısa görevlerde nedeni geliştirici araçlarıyla bulup kalıcı çözüm uygularsın.
HTTP önbellekleme ve içerik dağıtımı (Seviye 301, 17 ders): Tarayıcı, vekil ve CDN önbelleklerinin hangi başlıklarla çalıştığını ölçer; bayat içerik ve önbellek kaçırma sorunlarını teşhis edersin.
Tarayıcının içi: ayrıştırma, çizim ve güvenlik modeli (Seviye 301, 17 ders): Tarayıcının bir sayfayı nasıl ayrıştırıp çizdiğini, olay döngüsünü ve aynı köken ilkesi gibi güvenlik sınırlarını deneylerle incelersin.
HTML’de medya ve grafik: duyarlı görsel, SVG, canvas (Seviye 301, 16 ders): Doğru görsel biçimini ve boyutunu seçer, video ve altyazı ekler, SVG ve canvas ile çizim yaparak medya ağırlıklı sayfaları hızlı ve erişilebilir tutarsın.
Büyük projelerde CSS mimarisi (Seviye 301, 16 ders): Adlandırma düzenleri, basamak katmanları, tasarım belirteçleri ve derleme araçlarıyla büyüyen bir projede CSS’i düzenli, öngörülebilir ve bakımı kolay tutarsın.
CSS’te hareket: geçişler ve animasyonlar (Seviye 301, 15 ders): Geçiş, anahtar kare ve dönüşümlerle arayüze anlamlı hareket katar; hareketi hızlı ve harekete duyarlı kullanıcılara saygılı tutarsın.
JavaScript dilinin derinlikleri (Seviye 301, 18 ders): Prototipler, this bağlamı, kapanışlar, yineleyiciler, üreteçler ve Proxy gibi dilin iç işleyişini deneylerle kavrar, şaşırtıcı davranışların nedenini açıklayabilirsin.
Eşzamansız JavaScript ve olay döngüsü (Seviye 301, 16 ders): Olay döngüsünü, görev ve mikro görev kuyruklarını, Promise birleştiricilerini ve iptal desenlerini öğrenerek bekleyen, yarışan ve hata veren eşzamansız kodu doğru yönetirsin.
TypeScript ile tür güvenli JavaScript (Seviye 301, 18 ders): JavaScript koduna adım adım tür ekler, derleyicinin hataları kod çalışmadan önce yakalamasını sağlar ve tür sistemiyle güvenli arayüzler tasarlarsın.
JavaScript araçları ve test (Seviye 301, 16 ders): Bir ön yüz projesini Vite ile kurar, lint ve biçimlendirme ekler, birim ve uçtan uca testler yazar ve bağımlılıkları güvenle yönetirsin.
React ile uygulama geliştirme (Seviye 301, 16 ders): Yönlendirme, bağlam, indirgeyici, veri getirme, form ve testlerle çok sayfalı bir React uygulamasını uçtan uca kurar; durumu ve performansı düzenli tutarsın.
API tasarımı: sözleşme, sürüm, dayanıklılık (Seviye 301, 18 ders): Tutarlı adlandırma, hata biçimleri, sayfalama, sürümleme, eş etkililik ve hız sınırlamasıyla uzun ömürlü API’ler tasarlar, sözleşmeyi testlerle korursun.
Erişilebilir arayüz bileşenleri (Seviye 301, 15 ders): Menü, sekme, kalıcı pencere, akordeon ve bildirim gibi bileşenleri ARIA kalıplarına ve klavye beklentilerine uygun yazıp ekran okuyucuyla sınarsın.
Web performansı temelleri (Seviye 301, 18 ders): Lighthouse ve geliştirici araçlarıyla Core Web Vitals ölçütlerini ölçer; görsel, yazı tipi, betik ve önbellek iyileştirmeleriyle sayfaları ölçülebilir biçimde hızlandırırsın.
Ön yüz proje atölyesi (Seviye 301, 15 ders): Gerçek gereksinimlerden yola çıkarak veri panosu, kanban tahtası ve çevrimdışı saha formu gibi küçük uygulamaları planlar, yazar, sınar ve yayınlarsın.
HTTP/2, HTTP/3 ve QUIC (Seviye 401, 15 ders): HTTP/1.1’in sınırlarından yola çıkarak HTTP/2 çerçevelerini, başlık sıkıştırmayı ve QUIC üzerinde HTTP/3’ü araçlarla gözlemler, sunucuda açıp ölçersin.
Web bileşenleri: özel öğeler ve Shadow DOM (Seviye 401, 14 ders): Çerçeve kullanmadan özel öğeler, şablonlar ve Shadow DOM ile yeniden kullanılabilir, erişilebilir ve forma katılabilen bileşenler yazarsın.
Modern CSS: :has, kapsayıcı sorgular, renk uzayları (Seviye 401, 14 ders): :has seçicisi, kapsayıcı birimleri, yeni renk işlevleri, mantıksal özellikler ve çapa konumlandırma gibi yeni CSS özelliklerini eski tarayıcılar için yedekleriyle birlikte kullanırsın.
Tarayıcı API’leri: işçiler, çevrimdışı çalışma, gerçek zaman (Seviye 401, 15 ders): Web Worker, Service Worker, IndexedDB, WebSocket, Server-Sent Events ve Web Crypto gibi tarayıcı API’leriyle çevrimdışı çalışan ve anlık güncellenen uygulamalar yazarsın.
API kimlik doğrulama: oturum, belirteç, OAuth 2.0 (Seviye 401, 16 ders): Oturum çerezi, API anahtarı, JWT ve OAuth 2.0 ile OpenID Connect akışlarını kurup karşılaştırır, her birinin doğru ve güvenli kullanımını uygulamalı öğrenirsin.
Erişilebilirlik denetimi ve raporlama (Seviye 401, 14 ders): Bir siteyi WCAG başarı ölçütlerine göre otomatik ve elle denetler, bulguları önem sırasıyla raporlar ve düzeltme planını sürekli entegrasyona bağlarsın.
Sıfırdan HTTP sunucusu yazmak (Seviye 501, 15 ders): Python soketleriyle HTTP/1.1 ayrıştırıcısı, yönlendirici, statik dosya sunucusu ve eşzamanlı bağlantı yönetimi yazarak protokolü en alt düzeyde kavrarsın.
HTML ayrıştırma ve temizleme: standardın içinden (Seviye 501, 13 ders): HTML standardındaki ayrıştırma kurallarını, hata düzeltmeyi ve DOM kurulumunu inceler; güvenli bir HTML temizleyicinin neden zor olduğunu kendi denemelerinle görürsün.
CSS ve çizim performansı (Seviye 501, 13 ders): Seçici maliyetini ve stil hesaplama, yerleşim, boyama sürelerini ölçer; içerik görünürlüğü ve sınırlama gibi araçlarla büyük sayfaları akıcı hale getirirsin.
JavaScript motoru, performans ve bellek (Seviye 501, 13 ders): Motorun kodu nasıl derleyip iyileştirdiğini, çöp toplayıcıyı ve bellek sızıntılarını profil araçlarıyla inceler, ölçerek hızlandırırsın.
İleri web performansı mühendisliği (Seviye 501, 13 ders): Sunucu yanıt süresinden önbellek katmanlarına, kritik yoldan çizim stratejilerine kadar uçtan uca darboğaz analizi yapar, iyileştirmeleri deneylerle kanıtlarsın.
Uçtan uca web uygulaması bitirme projesi (Seviye 501, 15 ders): Bir randevu uygulamasını tasarımdan yayına kadar kendin kurar; API, veritabanı, erişilebilir ön yüz, kimlik doğrulama, önbellek ve performans ölçümünü tek projede birleştirirsin.

Projeler

Klinik için ilk web sitesini kur ve yayımla: Lavinya Klinikleri'nin bir şubesi için ana sayfa, hizmetler ve iletişim sayfalarından oluşan bir siteyi HTML ve CSS ile yazar, lab web sunucusunda yayımlarsın.
Bir sayfanın yüklenişini izle: DNS, TLS ve HTTP raporu: Kuzeyyıldızı Kargo'nun lab ortamındaki takip sayfasının nasıl yüklendiğini tarayıcı geliştirici araçları ve curl ile adım adım izler, yavaşlığın kaynağını gösteren kısa bir rapor yazarsın.
JavaScript ile ölçüye göre fiyat hesaplayıcı: Karaçam Mobilya'nın ölçüye göre dolap siparişleri için en, boy ve malzemeye göre fiyat hesaplayan bir JavaScript sayfası yazar, geçersiz ölçülerde anlaşılır uyarı gösterirsin.
Erişilebilir şirket portalı sayfası: Şirket portalı için ekran okuyucu ve klavyeyle de rahat kullanılan bir web sayfası hazırlar, erişilebilirlik kontrollerinden geçtiğini gösterirsin.
Paylaşılabilir arama sayfası (adreste durum): Arama ve filtre seçimlerini adres çubuğunda tutan bir sayfa yapar, adresi paylaşan birinin aynı sonuçları gördüğünü gösterirsin.
Erişilebilir ve doğrulamalı kayıt formu: Hatalı girişi açıkça belirten, klavye ve ekran okuyucuyla kullanılabilen bir kayıt formu yapar ve doğrulamaların çalıştığını gösterirsin.
React ile program sayfası: React ile etkinlik programını listeleyen, güne göre filtreleyebilen bir sayfa geliştirir ve çalışan hâlini teslim edersin.
Nginx ile iki siteyi tek sunucuda yayımla: Selvikent Belediyesi'nin ana sitesi ile etkinlik sitesini tek Nginx sunucusunda sanal konaklarla yayımlar, yönlendirmeleri, özel hata sayfalarını ve erişim kayıtlarını ayarlar ve curl ile doğrularsın.
Her ekrana uyan restoran menü sayfası: Mercanköşk Otelcilik'in restoran menüsü için Flexbox ve Grid ile telefondan geniş ekrana kadar düzgün görünen bir sayfa hazırlar, üç ekran genişliğinde çalıştığını gösterirsin.
Önbellek başlıklarını ve ters vekil önbelleğini ayarla: Turnalı Perakende'nin ürün sitesinde kaynak sunucunun önbellek başlıklarını ve önündeki ters vekilin önbellek kurallarını düzeltir, kişisel sayfaların önbelleğe girmediğini ve isabet oranının arttığını ölçümle gösterirsin.
React ve TypeScript ile sipariş panosu: Ayçiçeği Gıda'nın sipariş API'sinden veri çeken bir React panosunu TypeScript ile yazar, yükleme ve hata durumlarını ele alır ve bileşenleri sınarsın.
Erişilebilir iletişim kutusu, sekme ve açılır liste bileşenleri: Saklıvadi Üniversitesi'nin öğrenci portalı için iletişim kutusu, sekme ve açılır liste bileşenlerini klavye ve ekran okuyucuyla tam kullanılabilir biçimde yazar, her birini ekran okuyucuyla sınarsın.
Yavaş katalog sayfasını ölç ve hızlandır: Ilgıntepe Tekstil'in ağır görsellerle dolu kumaş kataloğu sayfasını ölçer, duyarlı görseller, geç yükleme ve kaynak sıralamasıyla hızlandırır ve önce ile sonra ölçümlerini raporlarsın.
Sözleşmeli ve sürümlü REST API'yi Node.js ile kur: Mavikaya Lojistik'in iş ortakları için bir gönderi API'sinin sözleşmesini yazar, Node.js ile sürümleme, sayfalama ve tutarlı hata biçimiyle uygular ve sözleşmeye uyduğunu sınarsın.
Dağınık CSS'i katmanlı ve değişkenli bir yapıya taşı: Göktaşı Yazılım'ın ürün sitesindeki birbirini ezen stilleri katmanlara ve tasarım değişkenlerine ayırır, görünümü bozmadan sadeleştirir ve hareket azaltma tercihine uyan geçişler eklersin.
Uygulamaya OAuth 2.0 ile güvenli oturum açma ekle: Yelkovan Bankası'nın iç duyuru uygulamasına lab kimlik sağlayıcısı üzerinden yetkilendirme kodu ve PKCE akışıyla oturum açma ekler, oturum çerezlerini güvenli ayarlar ve akışın her adımını belgelendirirsin.
Veli portalının erişilebilirlik denetimi ve raporu: Gelincik Okulları'nın veli portalını otomatik araçlar, klavye ve ekran okuyucuyla WCAG ölçütlerine göre denetler, bulguları önem sırasına koyup çözüm önerileriyle bir denetim raporu yazarsın.
Çevrimdışı çalışan saha notları uygulaması: Demirsu Enerji'nin saha ekipleri için bağlantı yokken de açılan ve not kaydeden bir web uygulaması yazar, bağlantı gelince eşitler, canlı duyuruları gösterir ve not kartını özel bir öğe olarak hazırlarsın.
Soketlerden başlayarak kendi HTTP sunucunu yaz: Lodoskaya Denizcilik'in liman sefer çizelgesini sunan küçük bir HTTP/1.1 sunucusunu hazır çatı kullanmadan yazar, kalıcı bağlantıyı, hatalı istekleri ve dizin dışına çıkma denemelerini doğru ele aldığını gösterirsin.
Uçtan uca randevu uygulaması: API, veritabanı ve yayın: Sedirli Hukuk Bürosu için ön yüzü, Node.js API'si ve PostgreSQL veritabanı olan bir randevu uygulamasını tamamlar, Nginx arkasında yayımlar ve çalıştığını uçtan uca sınamayla gösterirsin.