czay.dev
0/68
Yol haritaları

Junior Frontend Developer 2026

Türkiye'deki junior frontend ilanlarında React'in yanına Docker, CI/CD, GraphQL ve Cloud ekleniyor. Bu harita o listeyi ayıklıyor: işe girmek için gerçekten gereken temel, ilanlarda sık geçen ama şart olmayanlar ve işe girdikten sonra öğrenilecekler.

20 teknolojiyi yüzeysel bilmek, hiçbirini doğru düzgün bilmemekten daha değerli değil. Sırayla ilerle, her konuya tıklayıp neyi bilmen gerektiğine bak, öğrendiklerini işaretle.

  • Temelİşe girmeden önce sağlam bilinmeli
  • İyi olurİlanlarda sık geçiyor, elini güçlendirir
  • Sonraİşe girdikten sonra, ihtiyaç doğunca

Bir konuya tıkla: ne bilmen gerektiği ve kaynaklar açılır.

  1. 01

    Temel

    Her şeyin üstüne kurulduğu kısım. Burayı atlayan, sonraki her aşamada geri dönüyor.

  2. 02

    Araçlar

    Bir ekipte çalışabilmek için gereken günlük araçlar.

  3. 03

    Framework

    İlanların asıl istediği kısım. Temel sağlamsa burası sandığından hızlı gider.

  4. 04

    İşe hazırlık

    İlanlarda sık geçen ve seni diğer adaylardan ayıracak olanlar.

  5. 05

    Sonradan öğrenilebilecekler

    İlanlarda gördüğün ama işe girmek için şart olmayanlar. Production'da ihtiyaç doğdukça, ekibinle birlikte öğrenirsin.

Konu konu

Haritadaki her konunun açıklaması, bilmen gerekenler ve kaynaklar — tek listede.

  1. 01Temel

    • Web nasıl çalışır?· Temel

      Tarayıcıya bir adres yazdığında neler olduğunu bilmek, karşılaşacağın hataların yarısını anlamanı sağlar. Derinlemesine değil, resmin bütünü yeterli.

      Bilmen gerekenler

      • İstemci–sunucu modeli: istek gider, cevap gelir
      • Alan adı, DNS ve hosting'in kabaca ne olduğu
      • Tarayıcının HTML, CSS ve JavaScript'i nasıl işleyip ekrana çizdiği

      Kaynaklar

      • HTTP ve HTTPS· Temel

        Frontend'in konuştuğu dil. Metotları ve durum kodlarını okuyabilmek, API hatalarını kendi başına çözebilmek demek.

        Bilmen gerekenler

        • GET, POST, PUT, PATCH, DELETE ne zaman kullanılır
        • Durum kodları: 200, 201, 301, 400, 401, 403, 404, 500
        • İstek ve cevap başlıkları (headers)
        • HTTPS neden şart

        Kaynaklar

      • DNS ve alan adı· Temel

        Bir alan adının bir sunucuya nasıl çözüldüğü. Projeni yayına alırken ilk karşılaşacağın şey.

        Kaynaklar

      • Tarayıcı ve render· Temel

        HTML'den DOM'a, CSS'ten ekrana çizime giden yol. Performans konuşulduğunda herkes buraya döner.

        Bilmen gerekenler

        • DOM ve CSSOM
        • Layout, paint, composite
        • Render'ı engelleyen kaynaklar

        Kaynaklar

    • HTML· Temel

      Sayfanın iskeleti. 'HTML zaten kolay' diye geçilen ama mülakatta en çok açık veren konu: doğru etiketi seçmek hem erişilebilirliği hem SEO'yu belirliyor.

      Bilmen gerekenler

      • Belge yapısı: head, body, meta etiketleri
      • Doğru etiketi seçmek: div her şeyin cevabı değil

      Kaynaklar

      • Semantik HTML· Temel

        header, nav, main, article, section, button — her birinin bir anlamı var. Ekran okuyucu da arama motoru da o anlamı okuyor.

        Bilmen gerekenler

        • Tıklanan şey button, gidilen yer a
        • Başlık sırası: h1 → h2 → h3
        • landmark etiketleri

        Kaynaklar

      • Formlar· Temel

        Neredeyse her işte yazacağın şey. label, input türleri ve tarayıcının kendi doğrulaması seni çok fazla JavaScript'ten kurtarır.

        Bilmen gerekenler

        • label ile input'u bağlamak
        • input türleri: email, number, date…
        • required, pattern, min/max

        Kaynaklar

      • Erişilebilirlik· Temel

        Klavyeyle gezilebilen, ekran okuyucuyla okunabilen sayfa. Junior'dan uzmanlık beklenmez ama temel kurallar beklenir.

        Bilmen gerekenler

        • alt metni
        • Klavye ile odak sırası
        • Renk kontrastı
        • aria'yı ancak gerektiğinde kullanmak

        Kaynaklar

      • SEO temelleri· İyi olur

        title, description, başlık yapısı ve anlamlı adresler. Semantik HTML'i doğru yazıyorsan yolun yarısı zaten bitmiş.

        Kaynaklar

    • CSS· Temel

      Tasarımı koda çevirmek. Tailwind kullansan bile altında CSS var; box model ve layout'u bilmeyen Tailwind'de de takılıyor.

      Bilmen gerekenler

      • Seçiciler ve özgüllük (specificity)
      • Birimler: px, rem, %, vw
      • Kalıtım ve cascade

      Kaynaklar

      • Box model· Temel

        Her öğe bir kutu: content, padding, border, margin. Layout hatalarının çoğu buradan çıkar.

        Bilmen gerekenler

        • box-sizing: border-box
        • margin collapse
        • display: block, inline, inline-block

        Kaynaklar

      • Flexbox· Temel

        Tek eksende hizalama. Bugün yazdığın layout'ların çoğu flexbox.

        Kaynaklar

      • Grid· Temel

        İki eksende layout. Kart ızgaraları ve sayfa iskeleti için flexbox'tan çok daha sade.

        Kaynaklar

      • Responsive tasarım· Temel

        Telefondan geniş ekrana aynı sayfa. Mobil öncelikli yazmak artık tercih değil varsayılan.

        Bilmen gerekenler

        • Media query
        • Mobil öncelikli yaklaşım
        • Esnek birimler ve clamp()

        Kaynaklar

      • Tailwind CSS· İyi olur

        İlanların çoğunda var ve CSS'i biliyorsan bir haftada öğrenilir. Sıralama önemli: önce CSS, sonra Tailwind.

        Kaynaklar

    • JavaScript· Temel

      Haritanın en önemli durağı. React'te takılanların çoğu aslında JavaScript'te takılıyor. Burada acele etme.

      Bilmen gerekenler

      • Değişkenler, tipler, fonksiyonlar
      • Koşullar ve döngüler
      • Nesneler ve diziler

      Kaynaklar

      • Modern sözdizimi· Temel

        React kodunun her satırında göreceğin şeyler. Bunları rahat okuyamıyorsan React zor gelir.

        Bilmen gerekenler

        • let / const, arrow function
        • Destructuring ve spread
        • Template literal
        • Optional chaining (?.) ve ??

        Kaynaklar

      • Dizi metotları· Temel

        map, filter, reduce, find. React'te listeyi render etmenin ve veriyi dönüştürmenin yolu.

        Kaynaklar

      • DOM ve olaylar· Temel

        React bunu senin yerine yapıyor — ama önce elle yapmış olmalısın ki React'in neyi çözdüğünü anlayasın.

        Bilmen gerekenler

        • Öğe seçmek ve değiştirmek
        • addEventListener
        • Event bubbling ve delegation

        Kaynaklar

      • Asenkron JS· Temel

        Veri çekmek, beklemek, hata yakalamak. Mülakatların en sevdiği konu.

        Bilmen gerekenler

        • Callback → Promise → async/await
        • fetch ile veri çekmek
        • try/catch ile hata yönetimi
        • Event loop'un kabaca ne olduğu

        Kaynaklar

      • Scope ve closure· Temel

        React hook'larının neden öyle davrandığını anlamanın anahtarı.

        Kaynaklar

      • Modüller· Temel

        import / export. Her modern projenin dosyaları birbirine böyle bağlanıyor.

        Kaynaklar

  2. 02Araçlar

    • Git ve GitHub· Temel

      İlk gün kullanacağın şey. Kodu kaydetmek, dal açmak, birleştirmek ve ekiple paylaşmak. Portföyün de burada duruyor.

      Kaynaklar

      • Commit ve geçmiş· Temel

        add, commit, status, log, diff. Küçük ve anlamlı commit'ler atmak.

        Kaynaklar

      • Branch ve merge· Temel

        Dal açmak, birleştirmek ve çakışma (conflict) çözmek. Çakışmadan korkmamak başlı başına beceri.

        Kaynaklar

      • Pull request· Temel

        Ekipte kod böyle birleşiyor. PR açmak, açıklama yazmak ve gelen yorumlara cevap vermek.

        Kaynaklar

    • Geliştirme ortamı· Temel

      Projeyi kurmak, çalıştırmak ve hatayı bulmak için kullandığın araçlar.

      • npm / pnpm· Temel

        Paket kurmak, package.json'ı okumak, script çalıştırmak.

        Bilmen gerekenler

        • dependencies ve devDependencies farkı
        • npm run dev / build
        • Lock dosyası neden var

        Kaynaklar

      • Vite· Temel

        React projesi başlatmanın bugünkü varsayılan yolu. Derleme aracının ne yaptığını kabaca bilmek yeter.

        Kaynaklar

      • Tarayıcı DevTools· Temel

        Elements, Console, Network. Hatayı tahmin etmek yerine görmek.

        Kaynaklar

      • ESLint ve Prettier· İyi olur

        Kod stilini tartışmayı araca bırakmak. Çoğu projede hazır kurulu gelir, ne işe yaradığını bilmek yeter.

        Kaynaklar

  3. 03Framework

    • React· Temel

      Türkiye'deki junior frontend ilanlarının neredeyse tamamında var. react.dev'deki resmi belge baştan sona okunmaya değer.

      Kaynaklar

      • Bileşen ve JSX· Temel

        Arayüzü küçük, yeniden kullanılabilir parçalara bölmek.

        Bilmen gerekenler

        • JSX kuralları
        • Props ile veri geçirmek
        • Koşullu render ve listeler (key)

        Kaynaklar

      • State ve olaylar· Temel

        useState ile etkileşim. State'in nerede durması gerektiğine karar verebilmek asıl beceri.

        Bilmen gerekenler

        • useState
        • State'i yukarı taşımak
        • Kontrollü form elemanları

        Kaynaklar

      • Effect'ler· Temel

        useEffect ne zaman gerekir — ve daha önemlisi ne zaman gerekmez.

        Kaynaklar

      • Diğer hook'lar· Temel

        useRef, useMemo, useContext ve kendi hook'unu yazmak.

        Kaynaklar

      • Yönlendirme· Temel

        Birden fazla sayfalı uygulama. React Router ya da framework'ün kendi yönlendirmesi.

        Kaynaklar

      • Global state· İyi olur

        Context çoğu zaman yeter. Zustand ya da Redux'u ilanda görürsen kavramı bil; ezberlemeye gerek yok.

        Kaynaklar

    • TypeScript· Temel

      Artık neredeyse her ilanda var ve yeni projelerin çoğu TypeScript ile başlıyor. İleri seviye tip jimnastiği değil, günlük kullanım beklenir.

      Kaynaklar

    • API ile çalışmak· Temel

      Frontend'in işi çoğunlukla bir API'den gelen veriyi göstermek ve geri göndermek. Backend yazmak değil, backend'le konuşmak.

      • REST ve JSON· Temel

        Endpoint, metot, istek gövdesi, JSON cevap. Postman ya da benzeri bir araçla API denemek.

        Kaynaklar

      • Yükleniyor ve hata· Temel

        Veri gelene kadar ne gösteriyorsun, hata gelince ne oluyor? Junior projelerinin en çok atladığı kısım.

        Bilmen gerekenler

        • Loading, error, empty durumları
        • İsteği iptal etmek
        • Kullanıcıya anlamlı hata mesajı
      • TanStack Query· İyi olur

        Veri çekme, önbellek ve yeniden deneme işini hazır çözüyor. İlanlarda sık geçiyor.

        Kaynaklar

      • Kimlik doğrulama mantığı· İyi olur

        Token nedir, cookie nedir, giriş yapmış kullanıcı nasıl anlaşılır. Kurmak değil, frontend tarafından anlamak.

        Kaynaklar

  4. 04İşe hazırlık

    • Next.js· İyi olur

      React'i bildikten sonra öğren, önce değil. İlanların önemli kısmında geçiyor; sunucu tarafı render'ın neden var olduğunu anlamak yeterli başlangıç.

      Kaynaklar

    • Test· İyi olur

      Junior'dan test stratejisi beklenmez; basit bir bileşen testi yazabilmek ve testin neden yazıldığını bilmek beklenir.

    • Gerçek proje· Temel

      CV'de 15 framework görmektense, bir tane gerçek projede neden o teknolojiyi kullandığını bilen bir junior görmeyi tercih ederim. Haritanın asıl varış noktası burası.

      Bilmen gerekenler

      • Todo uygulaması değil, gerçek bir problemi çözen bir proje
      • Gerçek bir API'den veri çeken, yükleniyor ve hata durumları olan
      • Mobilde düzgün görünen, klavyeyle kullanılabilen
      • Yayına almak· Temel

        Projen bir adreste açılmıyorsa yok sayılır. Vercel, Netlify ya da Cloudflare Pages ile birkaç dakikalık iş.

        Kaynaklar

      • README· Temel

        Projenin ne yaptığı, nasıl çalıştırıldığı ve hangi kararı neden verdiğin. İşe alımcının okuduğu ilk ve çoğu zaman tek dosya.

      • Kararlarını anlatmak· Temel

        “Neden Zustand?”, “Neden bu klasör yapısı?” Mülakatta asıl ölçülen şey bu sorulara verdiğin cevap.

  5. 05Sonradan öğrenilebilecekler

    • Backend mantığı· Sonra

      Frontend geliştiricinin backend'i anlaması çok faydalı. Ama API yazmak, veritabanı ve kimlik doğrulama kurmak full-stack'in işi.

      • Node.js· Sonra

        Basit bir API yazıp frontend'ini ona bağlamak ufkunu açar. Junior frontend için şart değil.

        Kaynaklar

      • GraphQL· Sonra

        Şirketin kullanıyorsa bir haftada öğrenirsin. REST'i bilmek önce gelir.

        Kaynaklar

    • Altyapı· Sonra

      Genellikle ekipte bunu kuran biri vardır. Senden beklenen, kurulu olanı kullanabilmek.

      • Docker· Sonra

        Projeyi bir konteynerde çalıştırmak. Mevcut bir Dockerfile'ı okuyabilmek başlangıç için yeter.

        Kaynaklar

      • CI/CD· Sonra

        Her push'ta testlerin çalışması, her merge'de yayına çıkmak. İlk işinde zaten kurulu bulacaksın.

        Kaynaklar

      • Cloud· Sonra

        AWS, GCP, Azure. Frontend için çoğu zaman bir CDN ve statik barındırmadan ibaret.

    • Mimari· Sonra

      Architecture, scalability, code review, mentorluk. Bunlar deneyimle gelir; junior ilanında görüyorsan orada bir şeyler karışmış olabilir.

      • Ölçeklenebilirlik· Sonra

        Büyüyen bir kod tabanını yönetilebilir tutmak. Önce büyük bir kod tabanında çalışmış olman gerekiyor.

      • İleri performans· Sonra

        Core Web Vitals, bundle analizi, render optimizasyonu. Temel performans sağduyusu yeter, gerisi işte.

        Kaynaklar