Svelte Öğren - Kodlama Kursu
Svelte Öğren - Kodlama Kursu — Canlı bir düzenleyici ve yanında derlenmiş çıktıyla Svelte ve SvelteKit öğren
Svelte Öğren - Kodlama Kursu, telefonunda Svelte ve SvelteKit öğrenmeni sağlayan ücretsiz bir iOS ve Android uygulamasıdır. Canlı bir düzenleyicide önizlemeyle birlikte component’ler yaz, derleyicinin bunları dönüştürdüğü JavaScript kodunu gör ve ilk reaktif değerinden dağıtılmış full-stack uygulamaya kadar 41 kursta ilerle; üstelik yanında bir AI Mentor olsun.
- Fiyat
- Ücretsiz, Pro yükseltmesi
- Platformlar
- iOS ve Android
- Diller
- 22
- Yaş derecelendirmesi
- 4+
- Gereksinimler
- iOS 15.1 veya üzeri
O ekrandaki hiçbir şey Svelte çalıştırmıyor. Orada çalışan şey, Svelte’in yazdığı kod.
Uygulamanın ilk dersi, dokuz satırlık bir component’i derleyicinin onun için oluşturduğu JavaScript kodunun yanında gösteriyor. +1’e dokunduğunda çalışan satırlar aydınlanıyor: bir geçersizleştirme, yeniden hesaplanan bir değer, değişen iki metin düğümü ve dokunulmayan diğer her şey. Bu, framework’ün arkasındaki fikri açıklanmadan önce gösteriyor.
Nedir
Svelte Öğren - Kodlama Kursu; başlangıç seviyesinden ileri seviyeye derecelendirilmiş 41 kurs ve 163 ders üzerinden Svelte ve SvelteKit öğreten ücretsiz bir iOS ve Android uygulamasıdır. Uygulama, bir component’i derlenmiş JavaScript kodunun yanında gösteren bir demoyla açılır; ardından reaktivite, props, stores, geçişler, Svelte 5 runes ve SvelteKit routing, veri yükleme, form actions ve deployment konularını ele alır. Canlı önizlemeli bir düzenleyici ve AI Mentor da uygulamaya dahildir.
Uygulamanın içinde
Nasıl görünüyor
Kurs
Svelte kursunda neler var?
Uygulamanın kendi kurs listesinden 41 kurs ve 163 ders; A1'den C1'e kadar seviyelendirilir ve tam kapsamlı bir full-stack SvelteKit projesiyle sona erer.
İlk Bileşenler
Svelte'in ne olduğu ve neden farklı bir yaklaşım benimsediği, proje kurulumu ve reaktif değişkenlerle ilk bileşenini yazma.
Props, Şablonlar, Olaylar ve Binding
Props aktarma, markup içinde koşullar ve each döngüleri, DOM olayları ve özel olaylar, ayrıca bind: yönergeleriyle iki yönlü binding.
Yaşam Döngüsü, Stores ve Context
onMount ve onDestroy, writable, readable, derived ve özel stores, slot'lar ve composition, ayrıca Context API.
Geçişler, Animasyonlar ve Actions
Transition yönergeleri, animate yönergesi, yeniden kullanılabilir DOM davranışları için actions, özel geçişler ve spring ile tweened motion stores.
SvelteKit Temelleri
Dosya tabanlı routing ve sayfalar, load fonksiyonları, gelişmiş layout'lar, form actions, API routes, server hooks ve hata sayfaları.
Svelte 5 Runes
Runes'e giriş, props ve snippets, gelişmiş runes ve Svelte reaktifliğinin nasıl çalıştığına daha derin bir bakış.
Production'da SvelteKit
SSR ve prerendering, streaming, performans, SEO ve meta tags, güvenlik, auth kalıpları, adapters ve deployment.
Test ve Full-Stack
Vitest ile unit test'leri, Playwright ile uçtan uca testler, üçüncü taraf kütüphaneler, büyük ölçekli state management ve full-stack SvelteKit uygulaması.
Nasıl çalışır
Bir oturum nasıl ilerler?
Uygulama, tek bir reaktif değerden dağıtılabilir bir uygulamaya uzanan bir yol etrafında düzenlenmiştir ve her durak okumayı çalıştırılabilir bir şeyle birleştirir.
Önce derleyicinin çıktısını gör
Açılış demosu, küçük bir component’i derlendiği JavaScript kodunun yanında gösterir. Derlenmiş bölüm önceden oluşturulup uygulamanın içine dahil edilmiştir; bu nedenle demo bağlantı olmadan çalışır.
Bir component’i düzenle ve önizle
Derslerde HTML, CSS ve JavaScript sekmelerinin bulunduğu bir düzenleyici ile component’i önizlemede oluşturan bir çalıştırma düğmesi açılır. Önizleme, Svelte derleyicisini ağ üzerinden yüklediği için bağlantı gerekir.
Öğrendiklerini kontrol et
Her konunun ardından bir quiz ve kodlama görevleri gelir; AI Mentor bir kavramı açıklayabilir, bir öğrenme yol haritası önerebilir veya seni bir kurstan quiz’e tabi tutabilir. Weekly Code Challenge rekabetçi bir tur ekler.
İçinde neler var
Uygulamayla birlikte gelenler
41
A1’den C1’e kurslar
Svelte kurulumu ve ilk component’inden stores, transitions, SvelteKit routing ve hooks, Svelte 5 runes, testing ve full-stack bitirme projesine kadar 41 kursa yayılmış 163 ders.
Derlenmiş
Derlenmiş kodunun yanında component
İlk çalıştırmadaki demo, kaynak kodu ve oluşturulan JavaScript kodunu birlikte gösterir; güncellenen metin düğümlerini yeniden oluşturulan element’lere kıyasla sayar. Böylece bir güncellemenin maliyetini ekrandan okuyabilirsin.
Önizleme
Önizlemeli canlı düzenleyici
Markup, stiller ve script’i ayrı sekmelerde yazıp component’i telefonda oluştur. Önizleme, Svelte 4.2.19 derleyicisini kullanır; bu nedenle Svelte 5 runes ile yazılmış kod önizlenmeyebilir ve okumak ya da birlikte takip etmek daha iyidir.
AI
AI Mentor
Sohbet sekmesinden bir kurstaki temel kavramları, daha hızlı öğrenmek için ipuçlarını, bir quiz’i veya kişisel bir yol haritasını isteyebilir; okuyamadığın bir hata hakkında da soru sorabilirsin.
Haftalık
Weekly Code Challenge
Derslerin yanında katılabileceğin düzenli bir challenge turu; seriler, ilerleme takibi ve rutini sürdürmene yardımcı olan hatırlatıcılar içerir.
Sınav
Tamamlama sertifikası
Final sınavını geç; sertifikada adın yer alır. Bu sertifika, akredite bir yeterlilikten ziyade yaptığın çalışmanın kanıtıdır.
Arka plan
Svelte nedir ve web arayüzü oluşturmanın diğer yollarından farkı nedir?
Svelte, kullanıcı arayüzleri oluşturmaya yarayan ve component’leri, tarayıcıda değişiklikleri hesaplayan büyük bir runtime göndermek yerine, sayfayı doğrudan güncelleyen düz JavaScript koduna önceden derleyen bir framework’tür. Bir component; markup, stiller ve script içeren tek bir dosyadır ve count += 1 gibi bir atama ekranı güncellemek için yeterlidir. SvelteKit, bunun üzerine kurulmuş ve dosya tabanlı routing, sunucu tarafında veri yükleme, form işlemleri ve deployment için adapter’lar ekleyen uygulama framework’üdür. Öğrenen biri için pratik etkisi, daha az boilerplate ve kodla sayfada görünenler arasındaki mesafenin kısalmasıdır.
Derleme zamanı reaktivitesibir atama state’tir
Svelte’te derleyici, sıradan bir atamayı sayfanın etkilenen bölümlerini güncelleyen koda dönüştürür. $: ile başlayan etiketli bir ifade, okuduğu değerler değiştiğinde bir değeri yeniden hesaplar; böylece türetilmiş veriler için yardımcı işlevlere gerek kalmaz.
Storescomponent’ler arasında paylaşılan state
Writable store, birçok component’in abone olabileceği bir değer tutar; adının başına $ eklemek otomatik abonelik sağlar. State’in hesaplanması veya sarmalanması gerektiğinde derived ve custom stores bu yapıyı temel alır.
RunesSvelte 5 sözdizimi
Svelte 5, önceki derleyici sihrinin büyük bölümünü $state, $derived ve $props gibi açık işlevlerle ve yeniden kullanılabilir markup için snippets ile değiştirir. Her iki stil de gerçek projelerde kullanıldığı için uygulama, özgün modeli ve runes modelini ayrı kurslar olarak öğretir.
SvelteKitrouting, veri ve deployment
+page.svelte gibi bir dosya bir route’a dönüşür, bir load işlevi sayfa oluşturulmadan önce verileri getirir, form actions gönderimleri sunucuda işler ve bir adapter sonucu static host, Node server veya serverless platform için paketler.
Uygunluk
Kimler için uygun — kimler için değil
Şu durumlarda senin için uygun
- Uzun video kursları yerine kısa oturumlarla Svelte veya SvelteKit öğrenmek mi istiyorsun?
- Bir miktar HTML ve JavaScript biliyor ve compiler-first bir framework'ün neleri değiştirdiğini görmek mi istiyorsun?
- Reaktif güncellemelerin nasıl çalıştığını merak ediyor ve üretilen koda güvenmek yerine onu okumayı mı tercih ediyorsun?
- Yalnızca bileşenlerle sınırlı kalmayıp routing, data loading, auth ve deployment'a ulaşan bir yol mu istiyorsun?
- Bir kod parçasının neden böyle davrandığını AI Mentor'a sormayı mı seviyorsun?
Şu durumlarda doğru araç değil
- Önizlemede Svelte 4.2.19 compiler'ını kullanan Svelte 5 runes kodunu çalıştırmak mı istiyorsun?
- Telefondan, ancak hâlâ bir laptop gerektiren bütün bir SvelteKit projesini oluşturup deploy etmen mi gerekiyor?
- Her şeyin ücretsiz olmasını mı bekliyorsun: ilk kurs ücretsizdir, Pro ise geri kalanların kilidini açar.
- Daha önce hiç HTML veya JavaScript görmedin ve bir framework'e geçmeden önce genel bir programming kursu mu istiyorsun?
Sorular
Sık sorulan sorular
Telefonda Svelte'i nasıl öğrenebilirim?
Okumayı kod çalıştırmayla birleştiren bir yol seç; çünkü bir değeri değiştirip sayfanın buna nasıl tepki verdiğini izlediğinde Svelte'i anlamak en kolay hâline gelir. Svelte Öğren - Kodlama Kursu, derlenmiş çıktı demosuyla başlar; ardından HTML, CSS ve JavaScript editörü, önizleme ve AI Mentor içeren dersler sunar. iOS ve Android'de ücretsiz olarak başlayabilirsin.
Yeni başlayan biri için Svelte öğrenmek zor mu?
Svelte genellikle erişilebilir kabul edilir; çünkü bileşenleri sıradan HTML, CSS ve JavaScript'e benzer ve bir atama ekranı günceller. Stores, yaşam döngüsü, SvelteKit'in server ve client ayrımı ve Svelte 5 runes'e geçiş gibi zor kısımlar daha sonra gelir. Svelte Öğren - Kodlama Kursu, 41 kursunu A1'den C1'e kadar seviyelendirerek bu konuları sırayla sunar.
SvelteKit nedir ve uygulama bunu öğretiyor mu?
SvelteKit, Svelte için application framework'tür; dosya tabanlı routing, server üzerinde data loading, form actions, hooks ve deployment adapters ekler. Svelte Öğren - Kodlama Kursu'da SvelteKit routing ve sayfaları, data loading, form actions, API routes, hooks, hata yönetimi, SSR ve prerendering, streaming, güvenlik ve adapters için özel kurslar bulunur.
Uygulama Svelte 5 runes'i ele alıyor mu?
Evet. Svelte Öğren - Kodlama Kursu; runes'e giriş, props ve snippets ve gelişmiş runes üzerine kurslar içerir. Editörün önizlemesi şu anda Svelte 4.2.19 ile derlendiği için runes kodu önizlemede çalışmayabilir; bu nedenle en iyi şekilde ders metninden takip edilir.
Svelte kodunu telefonumda çalıştırabilir miyim?
Editörde bir bileşen yazabilir ve bunu önizlemede görüntüleyebilirsin. Svelte Öğren - Kodlama Kursu'ın önizlemesi, bileşeni oluşturmak için Svelte compiler'ını yükler; bu nedenle bağlantı gerekir. Açılıştaki derlenmiş çıktı demosu ise farklıdır: Derlenmiş kod uygulamanın içinde yer alır ve ağ bağlantısı olmadan çalışır.
Svelte Öğren - Kodlama Kursu ücretsiz mi?
Uygulama ücretsiz indirilebilir. İlk kurs ücretsizdir ve günlük AI Mentor kullanım hakkı sunar; Pro ise tüm kursların kilidini açar, reklamları kaldırır ve sınırsız AI Mentor kullanımı verir. Yükseltmeye karar vermeden önce gerçek dersleri tamamlayabilirsin.
Önceden JavaScript bilmem gerekiyor mu?
Bir miktar HTML ve JavaScript bilmek, ilk kursları kolaylaştırır; çünkü Svelte bileşeni bu dillerin tek dosyada bir araya gelmiş hâlidir. Svelte Öğren - Kodlama Kursu, Svelte'in ne olduğunu ve nasıl kurulacağını anlatarak başlar ve her kavramı sade bir dille açıklar; ancak ilk programming kursu değil, bir framework kursudur.
Hangi platformları ve dilleri destekliyor?
Svelte Öğren - Kodlama Kursu, iOS'te App Store üzerinden ve Android'de Google Play üzerinden çalışır; arayüz 22 dilde kullanılabilir. 4+ olarak derecelendirilmiştir, yani içerikte yaş sınırlaması olan hiçbir şey yoktur.
Başla
İlk bileşenini bugün derle
iOS ve Android'de, 22 dilde ücretsiz olarak başlayabilirsin.
CoddyKit'ten daha fazlası
iOS ve Android üzerinde kullanılabilir.