0Pricing
Frontend Academy icon

Frontend Academy

HTMLFrontendWebBeginner

Frontend Development Academy ile görsel olarak etkileyici ve responsive web siteleri geliştirin.

🤖 Yapay Zeka Destekli📚 41 kurs👥 100.000+ öğrenci⭐ 4,9 puan
Kurs Özeti

Modern Frontend'in Tam Spektrumunu İnşa Edin

Frontend geliştirme, kodu bir kullanıcının tarayıcıda gördüğü ve etkileşime girdiği her şeye dönüştürme disiplinidir — HTML yapısı, CSS sunumu, JavaScript davranışı ve bunları üretim ölçeğinde bir araya getiren framework'ler ve araçlar. Bu track tam yığını kapsar: web'in bir sayfayı nasıl sunduğundan type-safe React ve Vue uygulamaları yazmaya, performansı optimize etmeye ve bir CI/CD pipeline'ı üzerinden dağıtmaya kadar.

Neler Öğreneceksiniz

HTML, CSS ve JavaScript temelleri ile başlayacak, ardından TypeScript, DOM ve Browser APIs, responsive tasarım ve async programlama ile modüller dahil ES6+ kalıplarında akıcılık kazanacaksınız. Oradan React'e (hooks, ileri kalıplar, Next.js SSR) ve Vue 3'e (Composition API, Nuxt 3 SSR), state yönetimine, frontend testine, CSS mimarisine ve WebSockets ile gerçek zamanlı arayüzlere geçeceksiniz. Track, web performansı optimizasyonu, frontend güvenliği, design systems ve frontend CI/CD ile DevOps ile kapanır.

Öğrenme Yolu

Kırk bir kurs A1'den C2'ye kadar seviyeleri kapsar. A1 ve A2 kursları temelleri oluşturur — web nasıl çalışır, anlamsal markup, CSS animasyonları, Git ve TypeScript giriş. B1 ve B2 kursları profesyonel yetkinlik kurar: CSS Layout Mastery, JavaScript Modules and Build Tools, React ve Vue 3 temelleri, API entegrasyonu, Progressive Web Apps ve Next.js ile Nuxt 3'ün her ikisi ile Server-Side Rendering. C1 kursları üst düzey konuları ele alır: Advanced TypeScript for Frontend, React Advanced Patterns, Vue Advanced Patterns, Frontend Architecture, Design Systems and Component Libraries, Frontend Security ve Frontend CI/CD and DevOps. Track, C2'de Senior Frontend Engineering ile bitiş noktasına ulaşır; bu, her şeyi üretim seviyesi uygulamaya konsolide eder.

Nasıl Çalışır

Her kurs, yerleşik kod editöründe gerçek zamanlı geri bildirimle tamamladığınız kısa, uygulamalı dersler halinde bölünmüştür. Takılı kaldığınızda bir AI tutor kullanılabilir durumdadır ve her kavram, yapay örneklerden ziyade gerçek tarayıcı ve framework davranışını yansıtan alıştırmalar aracılığıyla pekiştirilir.

Öğrenmeye Başla →

Nasıl Öğreneceksin

🎯
Etkileşimli Dersler
Gerçek zamanlı geri bildirim ile uygulamalı kodlama alıştırmaları
🤖
AI Öğretmen
Takılırsan AI'dan anında yardım al
💻
Yerleşik Editör
Tarayıcında doğrudan kod yaz ve çalıştır
🏆
Sertifika
Kursu tamamladığında sertifika kazan
Müfredat

41 Kurs

Frontend Academy öğrenme yolundaki tüm kurslar.

01

Ön Yüz Geliştirmeye Hoş Geldiniz

A13 ders

Ön yüz geliştiricilerinin gerçekte ne yaptığını, bunun neden en çok talep gören ve en yaratıcı teknoloji kariyerlerinden biri olduğunu ve H…

02

Web Nasıl Çalışır

A14 dersPRO

Web'in temellerini anlayın: tarayıcıların sayfaları nasıl istediğini, DNS'nin ne yaptığını, HTTP'nin nasıl çalıştığını ve bir URL yazdığını…

03

Ön Yüz Geliştirme İçin HTML Temelleri

A14 dersPRO

Her web sayfasının yapı taşlarını öğrenin. Anlamsal öğeler kullanarak geçerli HTML5 belgeleri yazın, içeriği başlıklar ve listelerle yapıla…

04

Ön Yüz Geliştirme İçin CSS Temelleri

A14 dersPRO

HTML'nizi güvenle biçimlendirin. Basamaklamanın ve özgüllüğün nasıl çalıştığını öğrenin, renkleri ve tipografiyi uygulayın, kutu modelinde…

05

JavaScript Temelleri

A14 dersPRO

İlk JavaScript programlarınızı yazın. Değişken bildirmeyi, ilkel veri türleriyle çalışmayı, işlev tanımlamayı ve koşullar ile döngülerle pr…

06

Geliştirici Araçları ve İş Akışı

A14 dersPRO

Profesyonel bir ön yüz geliştiricisi gibi çalışın. İnceleme ve hata ayıklama için Chrome DevTools konusunda uzmanlaşın, VSCode'u yararlı ek…

07

TypeScript'e Giriş

A24 dersPRO

JavaScript'e türler ekleyerek hataları tarayıcıya ulaşmadan yakalayın. TypeScript'in tür sistemini öğrenin, değişkenleri ve işlevleri tür b…

08

DOM ve Tarayıcı API'leri

A24 dersPRO

JavaScript ile HTML'nizi etkileşimli hale getirin. Öğeleri seçin, olayları dinleyin, içeriği okuyup değiştirin ve Document Object Model'i k…

09

Duyarlı Tasarımın Temelleri

A24 dersPRO

Her ekran boyutunda düzgün çalışan yerleşimler oluşturun. Görünüm alanı meta etiketini öğrenin, akışkan yerleşimler için Flexbox ve Grid ku…

10

HTML Formları ve Anlamsal İşaretleme

A24 dersPRO

HTML bilginizi derinleştirin. ARIA öznitelikleriyle tamamen erişilebilir formlar oluşturun, HTML5 giriş türlerinin tamamını kullanın, yerel…

11

JavaScript: Diziler, Nesneler ve ES6+

A24 dersPRO

Modern söz dizimi ve güçlü yerleşik yöntemlerle JavaScript becerilerinizi geliştirin. map, filter ve reduce ile dizileri işleyin, nesneleri…

12

Git ve İş Birliği İş Akışı

A24 dersPRO

Bir ön yüz geliştiricisi olarak Git'i etkili şekilde kullanın. Çalışmayı kaydetmeye yönelik temel komutları öğrenin, özellik geliştirme içi…

13

CSS Değişkenleri, Geçişler ve Animasyonlar

A24 dersPRO

CSS hareketleriyle arayüzlere hayat verin. Bakımı kolay tasarım belirteçleri için özel özellikleri kullanın, durum değişikliklerine yumuşak…

14

CSS Yerleşiminde Uzmanlaşma

B14 dersPRO

Temellerin ötesine geçerek CSS yerleşiminde gerçekten uzmanlaşın. Flexbox hizalamasını ve satır kaydırmayı derinlemesine inceleyin, CSS Gri…

15

JavaScript Modülleri ve Derleme Araçları

B14 dersPRO

Modern JavaScript araç zincirini anlayın. ES modül söz dizimini kullanın, paketleri npm ile yönetin, Vite ile anında geliştirme sunucuları…

16

TypeScript Türleri ve Arayüzleri: Derinlemesine İnceleme

B14 dersPRO

TypeScript'in tür sistemini daha derinlemesine öğrenin. Yeniden kullanılabilir genel işlevler yazın, arayüzleri dönüştürmek için yardımcı t…

17

React Temelleri

B14 dersPRO

İlk React uygulamalarınızı oluşturun. JSX söz dizimini anlayın, işlevsel bileşenlerden kullanıcı arayüzleri oluşturun, verileri özelliklerl…

18

React: useEffect ve Veri Getirme

B14 dersPRO

React bileşenlerini dış sistemlerle eşitleyin. useEffect'in nasıl çalıştığını öğrenin, bağlama sırasında API'lerden veri getirin, yüklenme…

19

Vue 3 Temelleri

B14 dersPRO

Tek Dosyalı Bileşenleri kullanarak ilk Vue 3 uygulamalarınızı oluşturun. Options API'yi ve temel yönergeleri öğrenin; özellikler ve yayımla…

20

Ön Yüz için Erişilebilirlik

B14 dersPRO

Herkesin kullanabileceği arayüzler oluşturun. WCAG uyumluluk düzeylerini anlayın, erişilebilirliğin temeli olarak anlamsal HTML kullanın, A…

21

JavaScript: Eş Zamanlı Olmayan Programlama

B24 dersPRO

Eş zamanlı olmayan JavaScript'te temelden başlayarak uzmanlaşın. Olay döngüsünü anlayın, geri çağırma kalıplarından Promise'lere geçin ve u…

22

React: Gelişmiş Kancalar

B24 dersPRO

React kancaları API'sinin tamamında uzmanlaşın. useContext ile özellikleri zincirleme aktarmadan veri paylaşın, karmaşık durumu useReducer…

23

Vue 3: Composition API ve Tepkisellik

B24 dersPRO

Composition API ile Vue 3'ün tüm gücünü ortaya çıkarın. Tepkisel durum için ref ve reactive, türetilmiş değerler ve yan etkiler için comput…

24

Durum Yönetimi

B24 dersPRO

Uygulama genelindeki durumu etkili şekilde yönetin. React için Redux Toolkit'i, daha basit bir seçenek olan hafif Zustand'ı, Vue için Pinia…

25

Ön Yüz Testleri

B24 dersPRO

Ön yüz kodunuz için otomatik testler yazın. Jest'i kurun, React bileşenlerini Testing Library ile test edin, Vue bileşenlerini test edin ve…

26

CSS Mimarisi

B24 dersPRO

Ölçeklenebilir CSS yazın. Öngörülebilir seçiciler için BEM adlandırma kuralını öğrenin, stilleri CSS Modules ile kapsamlandırın, styled-com…

27

API Entegrasyonu ve REST

B24 dersPRO

Ön yüzünüzü arka uç API'lerine bağlayın. Tüm HTTP yöntemleri için yerel Fetch API'sini kullanın, araya giriciler ve temel URL'ler için Axio…

28

Sunucu Taraflı Görüntüleme: Next.js

B24 dersPRO

Next.js ile üretime hazır React uygulamaları oluşturun. Pages Router ile modern App Router'ı anlayın, Server ve Client Components arasındak…

29

Sunucu Taraflı Görüntüleme: Nuxt 3

B24 dersPRO

Nuxt 3 ile tam yığın Vue uygulamaları oluşturun. Tekrarlayan kodu ortadan kaldırmak için dosya tabanlı yönlendirme ve otomatik içe aktarmal…

30

Aşamalı Web Uygulamaları

B24 dersPRO

Web sitelerini uygulama benzeri deneyimlere dönüştürün. Yüklenebilirlik için Web App Manifest yazın, çevrimdışı destek için Service Worker'…

31

WebSockets ve Gerçek Zamanlı Ön Yüz

B24 dersPRO

Gerçek zamanlı kullanıcı arayüzleri oluşturun. Yerel WebSocket API'sini kullanın, Socket.io istemci kütüphanesini entegre edin, tek yönlü v…

32

Modern Ön Yüz Araçları

B24 dersPRO

Hızla gelişen JavaScript araç zincirinde uzmanlaşın. Vite'ı eklentilerle genişletin ve SSR için kullanın, esbuild'in hızına nasıl ulaştığın…

33

Web Performansı Optimizasyonu

C14 dersPRO

Sitelerinizi hızlandırın ve iyileşmeyi ölçün. Core Web Vitals'ı anlayın, Lighthouse denetimleri çalıştırın, görselleri web için optimize ed…

34

Ön Yüz için İleri Düzey TypeScript

C14 dersPRO

TypeScript'i sınırlarına kadar kullanın. Şablon dizgisi türleriyle türler oluşturun, React bileşenlerine ve kancalarına kesin genel türler…

35

React'te İleri Düzey Kalıplar

C14 dersPRO

React kodunu kütüphane geliştiricilerinin yazdığı şekilde yazın. Context destekli bileşik bileşenler oluşturun, ortak kaygıları paylaşmak i…

36

Vue'da İleri Düzey Kalıplar

C14 dersPRO

Profesyonel uygulamalarda kullanılan gelişmiş Vue 3 kalıplarında uzmanlaşın. provide/inject ile bir bileşen ağacında mantık paylaşın, Suspe…

37

Ön Yüz Mimarisi

C14 dersPRO

Büyük ekiplerde ölçeklenebilen ön yüz uygulamaları tasarlayın. Bileşen hiyerarşilerine Atomic Design uygulayın, Turborepo monorepo'larıyla…

38

Tasarım Sistemleri ve Bileşen Kütüphaneleri

C14 dersPRO

Paylaşılan bir bileşen kütüphanesi oluşturun ve bakımını yapın. Bileşenleri Storybook'ta belgeleyin, tasarım belirteçlerini Style Dictionar…

39

Ön Yüz Güvenliği

C14 dersPRO

Kullanıcılarınızı web güvenliği tehditlerine karşı koruyun. Çıktı kodlaması ve Content Security Policy ile XSS'yi önleyin, SameSite çerezle…

40

Ön Yüz CI/CD ve DevOps

C14 dersPRO

Ön yüzünüzün dağıtımını otomatikleştirin. Her gönderimde kod denetimi, test ve derleme yapmak için GitHub Actions iş akışları yazın, Vercel…

41

Kıdemli Ön Yüz Mühendisliği

C24 dersPRO

Kıdemli düzeyde çalışın. Sistem tasarımı mülakatlarına ön yüze özgü çerçevelerle yaklaşın, sağlıklı bir kod inceleme kültürü oluşturun, gen…

SSS

Sıkça Sorulan Sorular

Frontend Academy kursu ücretsiz mi?

Evet. Frontend Academy kursunu ücretsiz olarak başlayabilir ve etkileşimli derslerini hiç ücret ödemeden tamamlayabilirsin. İsteğe bağlı PRO aboneliği gelişmiş yapay zeka araçlarını ve paylaşılabilir bir sertifikayı açar.

HTML öğrenmek için önceki deneyim gerekli mi?

Hayır. Kurs temel bilgilerle başlar ve giderek daha ileri konulara ilerler, bu nedenle HTML deneyimi olmasa bile başlayabilirsin.

CoddyKit'te HTML nasıl öğreneceksin?

Yaparak öğrenirsin. Kısa etkileşimli dersler, açık bir açıklama ile gerçek zamanlı çalışan uygulamalı bir kodlama alıştırmasını bir araya getirir ve 24/7 AI öğretmen takılırsan kişiselleştirilmiş yardım sağlar.

Frontend Academy kursunu tamamladığımda sertifika alır mıyım?

Evet. PRO öğrenenler sınav yapabilir ve Frontend Academy kursu için doğrulanabilir bir koduyla paylaşılabilir bir tamamlama sertifikası kazanabilirler.

HTML öğrenimini telefonumda yapabilir miyim?

Evet. CoddyKit web ve yerel iOS ile Android uygulamaları olarak erişilebilir, böylece HTML öğrenimini herhangi bir cihazda yapabilir ve ilerlemeniz cihazlar arasında senkronize olur.

Frontend Academy Kursuna Şimdi Başla

Yapay zeka destekli derslerle programlamayı öğrenen binlerce öğrenciye katıl.

Ücretsiz Başla →Tüm Kursları Gözden Geçir