Sıfırdan Front-End Mühendisi Programı

Eğitim Hakkında

HTML ve CSS temelinden JavaScript ve TypeScript'e, React ve Vue'dan test ve yayına kapsamlı program

Bu program, katılımcıyı sıfırdan başlayarak üretim düzeyinde çalışan bir ön yüz (front-end) mühendisine dönüştürür. Semantik HTML, Flexbox ve Grid ile modern CSS düzeni ve responsive tasarımla başlar; ardından ES2015+ JavaScript, asenkron programlama ve TypeScript tip sistemi işlenir. React ile bileşen mimarisi, hooks ve durum yönetimi; Vue 3 ile Composition API ve Pinia ele alınır. Program Vite, Vitest, performans ve CI/CD ile yayına alma konularıyla tamamlanır.

Süre ve Format

5 Gün. Her gün dört modül; tek bir arayüz projesi HTML/CSS temelinden JavaScript, TypeScript, React ve Vue katmanlarıyla adım adım üretim düzeyine taşınır.

Seviye

Uzman Seviye — HTML/CSS temelinden JavaScript, TypeScript, React ve Vue ile üretim düzeyi ön yüz

Öğrenme Metodu

Gerçek bir arayüz projesi beş gün boyunca katman katman kurulur; her modülde yeni bir teknoloji veya kavram proje üzerinde uygulanır.

Neden Bu Eğitim?

🧱Sağlam temel

Semantik HTML, modern CSS ve JavaScript temelini doğru kurarak sonraki tüm çatıları anlamlandıracağınız kalıcı bir zemin oluşturursunuz.

⚛️İki büyük çatı

Hem React hem Vue'yu öğrenerek piyasadaki iş ilanlarının büyük kısmına hazır olur, projeye göre doğru aracı seçebilirsiniz.

🚀Üretime hazır

Test, performans ve CI/CD ile yayın konularını kapsayarak kodu yalnızca yazmayı değil güvenle üretime almayı da öğrenirsiniz.

Anahtar Konular

front-end eğitimiweb arayüz geliştirme eğitimisıfırdan web geliştirme kursureact eğitimivue eğitimijavascript eğitimitypescript kursuhtml css eğitimiön yüz geliştirici programımodern web geliştirme eğitimi

“İyi bir ön yüz mühendisi yalnızca arayüz çizmez; sağlam temel, doğru araç ve güvenli yayınla kullanıcıya değer taşır.”

Ön Koşullar

Program sıfırdan ilerler; verim için faydalı olacak birkaç nokta

1

Bilgisayar kullanımı

Dosya yönetimi, tarayıcı kullanımı ve temel düzeyde İngilizce okuma, dokümantasyonu takip etmek için yeterlidir.

2

Önbilgi gerekmez

Program HTML ve CSS'ten başlar; önceden kodlama deneyimi gerekmez, mevcut bilgi varsa ilk gün hızlı tekrar olur.

3

Geliştirme ortamı

Node.js, modern bir tarayıcı ve VS Code gibi bir kod düzenleyicinin kurulu olması uygulamalar için gereklidir.

4

Öğrenme kararlılığı

Beş günlük yoğun tempo ve bol uygulama içerdiğinden düzenli pratik ve ödevlere zaman ayırma beklenir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı semantik HTML ile erişilebilir sayfa yapısı kurar, Flexbox ve Grid ile düzen tasarlar ve medya sorgularıyla mobil öncelikli responsive arayüz oluşturur.

Modül 1

Semantik HTML ve Yapı

Semantik etiketler: header, nav, main, article, footer
Form elemanları, label ilişkisi ve doğrulama
Görsel, video ve figure ile medya yerleşimi
Meta etiketler, karakter kümesi ve viewport
Belge ana hattı (outline) ve başlık hiyerarşisi
Temel erişilebilirlik: alt metin ve odak sırası

Modül 2

CSS Düzen: Flexbox

Kutu modeli, margin, padding ve border davranışı
display: flex ve ana eksen / çapraz eksen
justify-content ve align-items ile hizalama
flex-grow, flex-shrink ve flex-basis dengesi
flex-wrap ile çok satırlı esnek yerleşim
gap özelliği ile öğeler arası boşluk yönetimi

Modül 3

CSS Grid ile Düzen

grid-template-columns ve satır/sütun tanımı
fr birimi ve repeat ile esnek ızgara
grid-area ve adlandırılmış alanlarla yerleşim
minmax ve auto-fit ile responsive ızgara
Flexbox ile Grid arasında doğru seçim
İç içe ızgara ve karmaşık sayfa düzeni

Modül 4

Responsive ve Modern CSS

Mobil öncelikli yaklaşım ve kırılma noktaları
Medya sorguları ve rem / em / clamp birimleri
CSS değişkenleri (custom properties) kullanımı
prefers-color-scheme ile karanlık mod
Geçişler, dönüşümler ve temel animasyonlar
container query ile bileşen tabanlı yanıt

Günün hedefiKatılımcı modern JavaScript söz dizimini, asenkron akışları ve DOM etkileşimini uygular; TypeScript ile tip güvenliği ekleyerek bakımı kolay kod yazar.

Modül 1

Modern JavaScript (ES2015+)

let / const, blok kapsamı ve hoisting farkı
Ok fonksiyonları ve this bağlamı davranışı
Destructuring, spread ve rest operatörleri
Şablon dizgeleri ve kısa nesne söz dizimi
map, filter, reduce ile dizi dönüşümleri
Opsiyonel zincir (?.) ve nullish (??) kullanımı

Modül 2

Asenkron JavaScript

Olay döngüsü, çağrı yığını ve görev kuyruğu
Promise oluşturma, then ve catch zinciri
async / await ile okunur asenkron kod
Fetch API ile ağ isteği ve JSON işleme
Promise.all ve paralel istek yönetimi
Hata yakalama ve try / catch desenleri

Modül 3

DOM ve Olay Yönetimi

querySelector ile öğe seçimi ve erişim
addEventListener ve olay nesnesi kullanımı
Olay yayılımı, bubbling ve delegasyon
DOM oluşturma, güncelleme ve kaldırma
Form verisi okuma ve istemci doğrulaması
localStorage ile basit istemci kalıcılığı

Modül 4

TypeScript Tip Sistemi

Temel tipler, union ve literal tip tanımı
interface ve type ile nesne şekli tanımı
Generic ile yeniden kullanılabilir tipler
Opsiyonel, readonly ve indeks imzaları
Tip daraltma (narrowing) ve tip koruması
tsconfig, strict mod ve derleme ayarları

Günün hedefiKatılımcı React bileşenleri ile arayüz kurar, hooks ile durum ve yan etki yönetir, yönlendirme ve veri çekme ile çok sayfalı bir uygulama geliştirir.

Modül 1

Bileşenler ve JSX

Fonksiyon bileşeni ve JSX söz dizimi
props ile veri aktarımı ve bileşimi
Koşullu çizim ve liste ile key kullanımı
Bileşen parçalama ve yeniden kullanım
children ile bileşen içeriği aktarımı
Olay işleme ve form kontrollü girişleri

Modül 2

Hooks ile Durum ve Yan Etki

useState ile yerel durum yönetimi
useEffect ile yan etki ve temizleme
useRef ile referans ve DOM erişimi
useMemo ve useCallback ile iyileştirme
useContext ile prop zincirinden kaçınma
Özel hook (custom hook) yazımı ve paylaşımı

Modül 3

Yönlendirme ve Veri Çekme

React Router ile rota ve bağlantı tanımı
Dinamik parametre ve iç içe rotalar
Programatik yönlendirme ve koruma
Fetch ile sunucudan veri çekme deseni
Yükleniyor ve hata durumlarının yönetimi
Form gönderimi ve istek sonrası güncelleme

Modül 4

Durum Yönetimi ve Performans

Durumun yukarı taşınması ve paylaşımı
Context API ile genel durum yönetimi
Zustand ile sade merkezi durum deposu
React.memo ile gereksiz çizimi engelleme
Liste sanallaştırma ve ağır bileşenler
React DevTools ile çizim analizi

Günün hedefiKatılımcı Vue 3 bileşenleri kurar, Composition API ve reaktivite sistemini kullanır, Pinia ile durum yönetir ve Vue Router ile uygulamayı yapılandırır.

Modül 1

Vue 3 Temelleri ve SFC

Tek dosya bileşeni (SFC) yapısı ve bölümleri
Şablon söz dizimi ve metin bağlama
v-bind, v-on ve v-model yönergeleri
v-if ve v-for ile koşul ve liste çizimi
Hesaplanmış özellik (computed) tanımı
İzleyici (watch) ile değişime tepki

Modül 2

Composition API ve Reaktivite

setup fonksiyonu ve script setup söz dizimi
ref ve reactive ile reaktif durum tanımı
computed ile türetilmiş değer üretimi
watch ve watchEffect ile yan etki
Yaşam döngüsü kancaları (lifecycle hooks)
Composable ile mantığın yeniden kullanımı

Modül 3

Pinia ile Durum Yönetimi

Store tanımı: state, getters ve actions
Bileşende store kullanımı ve reaktiflik
Asenkron action ile sunucu verisi yönetimi
Store'lar arası iletişim ve bileşim
storeToRefs ile reaktifliği koruma
Pinia eklentileri ve kalıcılık

Modül 4

Vue Router ve Bileşen İletişimi

Rota tanımı, bağlantı ve görünüm yerleşimi
Dinamik rota ve iç içe yönlendirme
Navigasyon koruması (navigation guards)
props ve emit ile bileşen iletişimi
provide / inject ile derin veri aktarımı
slot ile içerik dağıtımı ve esneklik

Günün hedefiKatılımcı Vite ile derleme hattını yapılandırır, Vitest ve Testing Library ile test yazar, performansı ölçüp iyileştirir ve projeyi CI/CD ile üretime alır.

Modül 1

Vite ve Derleme Hattı

Vite ile proje kurulumu ve dev sunucusu
Hot Module Replacement ve hızlı yenileme
Ortam değişkenleri ve mod yönetimi
Üretim derlemesi ve çıktı yapısı
Kod bölme (code splitting) ve tembel yükleme
Eklenti ekosistemi ve yapılandırma

Modül 2

Test Yazımı ve Kapsam

Vitest ile birim testi kurulumu
Testing Library ile bileşen testi
Kullanıcı etkileşimini test etme (userEvent)
Ağ isteklerini taklit etme (mocking)
Playwright ile uçtan uca (E2E) test
Test kapsamı ölçümü ve raporlama

Modül 3

Performans Optimizasyonu

Core Web Vitals: LCP, CLS ve INP ölçümü
Lighthouse ile performans denetimi
Görsel optimizasyonu ve lazy loading
Paket boyutu analizi ve ağaç sarsma
Önbellekleme ve CDN ile dağıtım
Çizim ve yeniden çizim darboğazları

Modül 4

Yayın ve CI/CD Süreci

Git ile sürüm kontrolü ve dal akışı
GitHub Actions ile otomatik derleme
Test ve lint adımlarının boru hattına eklenmesi
Vercel veya Netlify ile dağıtım
Ortam ayrımı: önizleme ve üretim
Sürüm etiketleme ve geri alma stratejisi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Semantik HTML/CSS

Semantik HTML ile erişilebilir sayfalar kurar, Flexbox ve Grid ile responsive ve modern düzenler tasarlayabilirsiniz.

✅

Modern JavaScript

ES2015+ söz dizimi, asenkron programlama ve DOM etkileşimiyle dinamik arayüz mantığını güvenle yazabilirsiniz.

✅

TypeScript ile tip

TypeScript tip sistemiyle interface, generic ve tip daraltma kullanarak hataları erkenden yakalayabilirsiniz.

✅

React bileşenleri

React ile bileşen mimarisi kurar, hooks ile durum ve yan etki yönetir, yönlendirme ve veri çekme uygulayabilirsiniz.

✅

Vue uygulamaları

Vue 3 Composition API ile reaktif arayüzler geliştirir, Pinia ve Vue Router ile uygulama yapısını kurabilirsiniz.

✅

Çatı seçimi

React ve Vue arasındaki farkları kavrayarak projenin gereksinimine göre doğru çatıyı seçip kullanabilirsiniz.

✅

Test ve kalite

Vitest, Testing Library ve E2E testlerle arayüzün doğruluğunu güvence altına alıp kalite standardı kurabilirsiniz.

✅

Üretime alma

Performans ölçümü, Vite derlemesi ve CI/CD ile projenizi optimize ederek güvenle üretime almayı öğrenirsiniz.

Kimler İçin Uygundur?

Web geliştirmeyi sıfırdan öğrenip üretim projelerinde çalışabilecek düzeye gelmek isteyen kişiler
kariyer değiştirenler ve HTML/CSS bilgisini modern JavaScript
React
Vue ekosistemine taşımak isteyen geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu program için önceden kodlama bilmek gerekir mi?

Hayır. Program HTML ve CSS temelinden başlar ve sıfırdan ilerler, bu nedenle önceden kodlama deneyimi gerekmez. Mevcut bilgisi olanlar ilk günü hızlı bir tekrar olarak değerlendirir. Yalnızca temel bilgisayar kullanımı, dosya yönetimi ve dokümantasyon okuyabilecek düzeyde İngilizce faydalıdır.

Neden hem React hem Vue öğretiliyor?

Piyasadaki iş ilanları ve projeler iki çatı arasında dağılmıştır. Her ikisini öğrenmek hem daha geniş bir iş havuzuna hazırlar hem de bileşen, durum yönetimi ve reaktivite gibi ortak kavramları iki açıdan görerek pekiştirir. Eğitimde her iki çatının güçlü yanları ve hangi senaryoda hangisinin tercih edileceği örneklerle karşılaştırılır.

Program sonunda iş bulabilir miyim?

Program, üretim düzeyinde projelerde çalışabilecek teknik yetkinliği kazandırmayı hedefler ve portföy oluşturmaya yardımcı olur. İşe alım süreçleri kişinin pratiği, portföyü ve piyasa koşullarına bağlı olduğundan bir istihdam taahhüdü verilmez; eğitim bu yolda güçlü ve uygulamalı bir temel sağlar.

Eğitimin süresi ve formatı nedir?

Program beş gün sürer ve her gün dört modülden oluşur. Tek bir arayüz projesi HTML/CSS temelinden JavaScript, TypeScript, React ve Vue katmanlarıyla adım adım geliştirilir. Yüz yüze veya online yapılabilir; içerik kurumun kullandığı araç ve çatılara göre uyarlanabilir ve bol uygulama içerir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen örnek arayüz projesini belgeler; kurumsal gruplara özel içerik uyarlaması ve projeye yönelik mentorluk ile genişletilebilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

SIFIRDAN FRONT-END (WEB ARAYÜZ) MÜHENDİSİ & UZMANI YETİŞTİRME VE GELİŞTİRME PROGRAMI EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Semantik HTML ve Yapı

CSS Düzen: Flexbox

CSS Grid ile Düzen

Responsive ve Modern CSS

Modern JavaScript (ES2015+)

Asenkron JavaScript

DOM ve Olay Yönetimi

TypeScript Tip Sistemi

Bileşenler ve JSX

Hooks ile Durum ve Yan Etki

Yönlendirme ve Veri Çekme

Durum Yönetimi ve Performans

Vue 3 Temelleri ve SFC

Composition API ve Reaktivite

Pinia ile Durum Yönetimi

Vue Router ve Bileşen İletişimi

Vite ve Derleme Hattı

Test Yazımı ve Kapsam

Performans Optimizasyonu

Yayın ve CI/CD Süreci

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Front-end Apps: POJO, EJB, & EJB Lite Eğitimi

Front-end Apps: Presentation with JSF Eğitimi

Front-end Apps: RESTful Services & Clients Eğitimi

Front-end Apps: Servlets & JavaServer Pages Eğitimi

Front-end Apps: Transaction Support Eğitimi

Front-end Apps: Web Components Eğitimi