Ana içeriğe geç
Software Dictionary

Yol haritası · Başlangıç

Frontend geliştirici

HTML ve CSS'ten framework'lere, render'a ve hızlı sayfalar yayınlamaya.

Tarayıcıda çalışan her şey: bir sayfanın yapı taşları, JavaScript ve asenkron modeli, framework'lerin nasıl render ettiği ve hepsini yayına çıkaran araçlar.

39 sayfa4 bölümyaklaşık 1 saat okuma

  • Web Geliştirme
  • Backend ve API'ler
  • Programlamanın Temelleri

Henüz başlanmadı0/39 okundu

HTML ile başla

İlerleme, yalnızca bu tarayıcıda tutulan okuma geçmişinizden gelir.

1. bölümYapı taşları

  1. 1HTMLWeb Geliştirme, s. 19HTML, başlık, paragraf, bağlantı, görsel ve form gibi öğelerle web sayfalarının yapısını ve içeriğini tanımlayan işaretleme dilidir.
  2. 2CSSWeb Geliştirme, s. 11CSS, HTML içeriğinin ekranda renk, yazı tipi, boşluk, yerleşim ve animasyon gibi yönlerden nasıl görüneceğini belirleyen stil sayfası dilidir.
  3. 3FlexboxWeb Geliştirme, s. 17Flexbox, öğeleri tek bir satır ya da sütunda düzenleyen ve büyüme, küçülme, hizalama ile boş alanı paylaşma biçimlerini denetleyen bir CSS yerleşim modelidir.
  4. 4CSS GridWeb Geliştirme, s. 12CSS Grid, öğeleri aynı anda satır ve sütunlar halinde düzenleyen, karmaşık sayfa yerleşimlerini kolayca kurmayı sağlayan iki boyutlu CSS yerleşim sistemidir.
  5. 5Media QueryWeb Geliştirme, s. 30Media query, stilleri yalnızca cihaz ya da tarayıcı ekran genişliği, yönelim veya koyu renk şeması gibi koşullara uyduğunda uygulayan CSS kuralıdır.
  6. 6Duyarlı TasarımWeb Geliştirme, s. 15Duyarlı tasarım, web sayfalarının yerleşimini, görsellerini ve metnini telefondan büyük monitöre her ekran boyutuna otomatik uyduran yaklaşımdır.
  7. 7Web ErişilebilirliğiWeb Geliştirme, s. 56Web erişilebilirliği, ekran okuyucu, klavye, altyazı ya da yakınlaştırma kullananlar dahil herkesin kullanabildiği web siteleri geliştirme pratiğidir.

2. bölümTarayıcıda JavaScript

  1. 8JavaScriptWeb Geliştirme, s. 25JavaScript, web tarayıcılarında sayfaları etkileşimli hale getiren ve Node.js gibi çalışma ortamlarıyla sunucularda da çalışan programlama dilidir.
  2. 9DOMWeb Geliştirme, s. 14DOM, tarayıcının bir web sayfasını temsil eden ve JavaScript'in okuyup değiştirerek kullanıcının gördüğünü güncelleyebildiği bellek içi nesne ağacıdır.
  3. 10Event LoopBackend ve API'ler, s. 12Event loop, olaylar ve I/O sonuçları hazır oldukça callback'leri tek tek çalıştırarak tek bir iş parçacığının birçok görevi yönetmesini sağlayan mekanizmadır.
  4. 11CallbackProgramlamanın Temelleri, s. 5Callback, başka bir fonksiyona argüman olarak verilen ve o fonksiyonun bir iş bittiğinde ya da bir olay gerçekleştiğinde sonradan çağırdığı fonksiyondur.
  5. 12PromiseProgramlamanın Temelleri, s. 46Promise, asenkron bir işlemin nihai sonucunu temsil eden bir nesnedir; iş bittiğinde kodun başarıya ya da hataya tepki vermesini sağlar.
  6. 13Async/AwaitProgramlamanın Temelleri, s. 2Async/await, asenkron kodu sıradan adım adım kod gibi okunur biçimde yazmayı sağlayan, her await'te bir promise ya da görev bitene dek duran sözdizimidir.
  7. 14AJAXWeb Geliştirme, s. 1AJAX (Asynchronous JavaScript and XML), JavaScript ile sunucudan arka planda veri alıp sayfayı yeniden yüklemeden yalnızca bir kısmını güncelleme tekniğidir.
  8. 15DebounceWeb Geliştirme, s. 13Debounce, bir fonksiyonu art arda gelen olaylar belli bir süre durana dek ertelemektir; böylece arama kutusu her tuşta değil, yazma bitince istek gönderir.
  9. 16Local StorageWeb Geliştirme, s. 29Local storage, bir sitenin kullanıcının cihazında anahtar-değer çiftleriyle metin saklamasını sağlayan tarayıcı özelliğidir; veri tarayıcı kapansa da kalır.
  10. 17CookieWeb Geliştirme, s. 7Cookie, bir web sitesinin tarayıcıdan saklamasını ve sonraki isteklerle geri göndermesini istediği, çoğunlukla oturum açık tutmak için kullanılan küçük veridir.

3. bölümFramework'ler ve render

  1. 18ReactWeb Geliştirme, s. 37React, veri değişince otomatik güncellenen, yeniden kullanılabilir bileşenlerle kullanıcı arayüzü kurmaya yarayan açık kaynaklı JavaScript kütüphanesidir.
  2. 19JSXWeb Geliştirme, s. 27JSX, kodun içine HTML benzeri işaretleme yazmayı sağlayan bir JavaScript sözdizimi uzantısıdır; çoğunlukla React ile arayüzün nasıl görüneceğini tarif eder.
  3. 20State ManagementWeb Geliştirme, s. 45State management (durum yönetimi), bir uygulamanın çalışırken değişen verileri nasıl saklayıp güncellediği, paylaştığı ve arayüzü bunlarla senkron tuttuğudur.
  4. 21Next.jsWeb Geliştirme, s. 32Next.js, React'e yönlendirme, sunucu tarafı render, statik üretim ve sunucu kodu ekleyen bir framework'tür; bütün bir web uygulaması tek projede geliştirilir.
  5. 22Sanal DOMWeb Geliştirme, s. 39Sanal DOM, sayfanın öğe ağacının JavaScript belleğinde tutulan hafif bir kopyasıdır; arayüz kütüphaneleri onu karşılaştırarak gerçek DOM'u verimli günceller.
  6. 23SPAWeb Geliştirme, s. 42SPA, tek bir HTML sayfası yükleyip içeriği JavaScript ile güncelleyen ve görünümler arası geçişte sayfayı yeniden yüklemeyen web uygulamasıdır.
  7. 24CSRWeb Geliştirme, s. 10CSR, tarayıcının çoğunlukla boş bir HTML sayfası ile JavaScript indirip sayfa içeriğini kullanıcının cihazında oluşturduğu render yaklaşımıdır.
  8. 25SSRWeb Geliştirme, s. 44SSR, sunucunun her istekte bir sayfanın tam HTML'ini oluşturduğu ve böylece kullanıcıların ile arama motorlarının hazır içeriği hemen aldığı tekniktir.
  9. 26SSGWeb Geliştirme, s. 43SSG, bir sitenin sayfalarını derleme zamanında düz HTML dosyalarına dönüştüren tekniktir; sunucular ya da CDN'ler bunları ek iş yapmadan anında sunabilir.
  10. 27HydrationWeb Geliştirme, s. 23Hydration, tarayıcıdaki JavaScript'in sunucuda üretilmiş HTML'i devralıp olay yöneticilerini ve durumu bağlayarak sayfayı etkileşimli hale getirdiği adımdır.

4. bölümYayına çıkarmak

  1. 28npmWeb Geliştirme, s. 33npm, Node.js'in varsayılan paket yöneticisi ve dünyanın en büyük yazılım deposudur; bir projenin bağımlılıklarını indirir ve sürümlerini takip eder.
  2. 29Paket YöneticisiProgramlamanın Temelleri, s. 43Paket yöneticisi, yazılım paketlerini ve onların bağımlılıklarını kuran, güncelleyen ve kaldıran, sürümleri otomatik olarak çözen bir araçtır.
  3. 30TypeScriptWeb Geliştirme, s. 51TypeScript, JavaScript üzerine statik tipler ekleyerek birçok hatayı kod çalışmadan yakalayan ve düz JavaScript'e derlenen bir programlama dilidir.
  4. 31BundlerWeb Geliştirme, s. 4Bundler, JavaScript modüllerini ve bağımlılıklarını tarayıcıların hızlıca indirip çalıştırabileceği birkaç optimize dosyada birleştiren bir derleme aracıdır.
  5. 32WebpackWeb Geliştirme, s. 60Webpack, uygulamanın import'larını izleyip JavaScript, CSS, görsel ve diğer dosyaları tarayıcıya uygun paketlerde birleştiren modül paketleyicisidir.
  6. 33ViteWeb Geliştirme, s. 54Vite, geliştirmede kodu tarayıcıya neredeyse anında sunan ve canlı ortam için optimize edilmiş dosyalar halinde paketleyen hızlı bir web derleme aracıdır.
  7. 34TranspilerWeb Geliştirme, s. 49Transpiler, kaynak kodu bir dilden ya da dil sürümünden benzer soyutlama düzeyindeki bir başkasına, örneğin TypeScript'ten JavaScript'e çeviren araçtır.
  8. 35Tree ShakingWeb Geliştirme, s. 50Tree shaking, hangi ES modül dışa aktarımlarının gerçekten import edildiğine bakarak hiç kullanılmayan kodu son paketten çıkaran bir derleme optimizasyonudur.
  9. 36Code SplittingWeb Geliştirme, s. 6Code splitting, bir web uygulamasının JavaScript'ini istenince yüklenen küçük parçalara bölen tekniktir; böylece ilk sayfa yalnızca gereken kodu indirir.
  10. 37Lazy LoadingWeb Geliştirme, s. 28Lazy loading, görsel, video, betik gibi kaynakların yüklenmesini gerçekten gerekene, genellikle görünür alana kaydırılana kadar erteleyen tekniktir.
  11. 38MinificationWeb Geliştirme, s. 31Minification, davranışı değiştirmeden boşlukları, yorumları ve uzun adları silerek kod dosyalarını küçülten işlemdir; böylece web sayfaları daha hızlı iner.
  12. 39PWAWeb Geliştirme, s. 36PWA, modern web API'leriyle geliştirilen, bir cihaza kurulabilen, çevrimdışı çalışabilen ve tek kod tabanından yerel uygulama gibi davranan bir web sitesidir.

Yol boyunca karşılaştırın

Bu yol haritasında kolayca karıştırılan çiftler, yan yana.

Daha fazla

Ayarlar

EnglishTürkçe