Adım 1
Öğrenme yolu
Frontend Developer Yol Haritası
Bir front end developer'ın gerçekten ihtiyaç duyduğu sırayla ücretsiz kurslar: yapı için HTML, yerleşim için CSS, davranış için JavaScript, güvenlik için TypeScript, gerçek uygulamalar için React ve Next.js, yayına almak için Git ve bunu kanıtlayacak sekiz proje. Her ders tarayıcında çalışır ve proje adımından önceki her kurs ücretsiz bir sertifikayla biter.
698,051+ codder bu kurslara kayıtlı
804 ders823 görev3,184 quiz sorusu
- Başlangıç dostu
Yapay zeka destekli kodlama yardımı
Uygulamalı interaktif dersler
Her derste sesli anlatım
Bilgini sınamak için testler
Yol boyunca 13 ücretsiz sertifika
Front end developer yolu, adım adım
Her adım, Coddy'de zaten var olan bir kurstur. Sırayla ilerle ya da eksik olduğun kursa doğrudan atla - ilerlemen her durumda kurs bazında kaydedilir.
- 1
- 2Adım 2
CSS: yerleşim ve tasarımÖzel sayfa
Bu adıma başlaBaşlaSeçiciler, kutu modeli, renkler ve tipografi, ardından iki bölüm boyunca flexbox, grid, duyarlı yerleşimler, geçişler ve animasyon. Bir sayfanın her gün kullandığın sayfalara benzemeye başladığı adım burasıdır.BaşlaÖzel sayfa2 bölüm, sırayla - 3Adım 3
JavaScript, dilin tamamıÖzel sayfa
Bu adıma başlaBaşlaTemeller, mantık ve akış kontrolü, ardından nesneler ve sınıflar - üç bölüm. Front end işi JavaScript işidir; bu adımdan sonraki her framework onu düzenlemenin bir yoludur ve ancak dil okunabilirse okunabilir.BaşlaÖzel sayfa3 bölüm, sırayla - 4Adım 4
Tarayıcıda JavaScriptÖzel sayfa
Bu adıma başlaBaşlaDOM, olaylar, veri çekme ve framework olmadan etkileşimli sayfalar kurmak, sonra da pratik front end kalıpları. HTML, CSS ve JavaScript'in tek bir şeye dönüştüğü yer burasıdır: kullanan kişiye yanıt veren bir sayfa.BaşlaÖzel sayfa - 5Adım 5
TypeScriptÖzel sayfa
Bu adıma başlaBaşlaTipler, arayüzler, generic'ler ve bir araç olarak derleyici hataları. Neredeyse her profesyonel React kod tabanı TypeScript'tir; bu yüzden sonradan eklenen bir konu değil, doğrudan framework'ten önce gelir.BaşlaÖzel sayfa - 6Adım 6
React ve Next.jsÖzel sayfa
Bu adıma başlaBaşlaBileşenler, props, state, hook'lar ve render, ardından yönlendirme, veri yükleme ve gerçek uygulamalar için Next.js. Front end ilanlarının en çok istediği framework, yazıldığı dilden sonra öğretiliyor.BaşlaÖzel sayfa - 7Adım 7
Git ve sürüm kontrolüÖzel sayfa
Bu adıma başlaBaşlaCommit'ler, branch'ler, merge, çakışma çözme ve remote'lar. Her front end işi ve her portföy projesi bir Git deposunda yaşar; bunu burada öğrenmek, bir sonraki adımdaki projelerin gerçek işte olduğu gibi yayına alınması demektir.BaşlaÖzel sayfa - 8Adım 8
Projeler: gördüğün şeyi kur
Bu adıma başlaBaşlaFlexbox ve seçici alıştırmaları, DOM ve dizi metotları pratiği, ardından gerçek projeler: bir Coddy profil kartı, bir Instagram sayfası, bir Netflix giriş sayfası ve bir görsel slider. Her biri bir işe alım uzmanının açabileceği bir portföy parçası.Başla8 kurs, sırayla- CSS Flexbox - Kapsamlı KursYalnızca html15 ders
- CSS SeçicileriYalnızca html15 ders
- JavaScript DOM MetotlarıYalnızca html13 ders
- JavaScript Dizi MetotlarıYalnızca javascript18 ders
- Coddy Profil Kartı Klonu | Front-end projesiYalnızca html26 ders24 görev1 proje
- Instagram Sayfası Klonu | Front-End ProjesiYalnızca html16 ders14 görev1 proje
- Netflix Giriş Sayfası Klonu | Ön Uç ProjesiYalnızca html19 ders18 görev1 proje
- Slider | Front-end ProjesiYalnızca html23 ders22 görev1 proje
Neler elde edersin
Kod yazmayı öğrenmek için kullanacağın her şey
Yaparak Öğren
Gerçek kod yazın, veritabanlarını sorgulayın, web siteleri oluşturun ve AI promptlarını öğrenin. İnteraktif derslerimiz modern geliştiricilerin ihtiyaç duyduğu tüm becerileri kapsar.
playground.js
Kod Editörü
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Girdi
"Alex"
Çıktı
"Hello, Coddy! Alex"
Serinizi Oluşturun
Tutarlı olun ve ilerlemenizin büyümesini izleyin! Günlük kodlama alışkanlığınızı takip edin, dondurma günleriyle serinizi koruyun ve her gün geldiğiniz için ödüller kazanın.
12 gün seri
Serinizi korumak için yarın geri dönün!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Ya Hep Ya Hiç
7 günün 5. günü
Seri Dondurma
2 left
Yolda Kodlayın
Kodlama yolculuğunuzu yanınızda taşıyın! Kurulum yok, indirme yok - sadece açın ve kodlamaya başlayın. iOS, Android ve Web'de 4.9 yıldız puanıyla kullanılabilir.
7
250
5
Değişkenler
DEVAM ET
4.9
Puan
Yalnız Değilsiniz
Küresel sıralamalarda yarışın, ödüller kazanmak için arkadaşlarınızı davet edin ve birbirinizin başarılarını kutlayın. Kodlama arkadaşlarla daha iyi!
Challenger Ligiİlk 7 yükselir
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Yükselme bölgesiHer şekilde öğren
Okuyun, dinleyin, kendinizi sınayın, AI'ya sorun veya daha önce öğrendiklerinize geri bakın. Her ders size uyum sağlar.
Değişkenlere Giriş
Ses
Değişken, programınızda daha sonra başvurabileceğiniz bir değeri saklayan adlandırılmış bir kaptır.
Python'da bir tane oluşturmak için önce adı, sonra eşittir işaretini, sonra saklamak istediğiniz değeri yazın.
Değer zamanla değişebilir - yeniden atama, adı yeni bir değere yönlendirir.
1xSarah
Sertifika Kazanın
Tamamladığınız her kurs için sertifika kazanın. LinkedIn profilinize ve özgeçmişinize ekleyerek işverenlere programlama uzmanlığınızı gösterin.
Tamamlama SertifikasıBu belge şunu onaylar:Ahmet Yılmazbaşarıyla tamamlamıştırPython Temelleri
Python Temelleri
TarihOca 2026
LinkedIn'e EkleFront end geliştirmeyi neden Coddy'de öğrenmelisin
- Kurduğun sayfayı görürsün. Her HTML, CSS ve JavaScript dersi kodunun yanında tarayıcıda canlı olarak görüntülenir; yani yanlış bir seçici ya da bozuk bir flexbox, en sonda bir ekran görüntüsünde değil, yazdığın saniyede gözüne çarpar.
- Doğru sıra ve atlanmayan bir JavaScript. Çoğu front end kursu HTML'den bir framework'e koşar; bu yol React'tan önce JavaScript'e tam üç bölüm ayırır, çünkü bir framework ancak altındaki dil okunabilir olduğunda okunabilir hale gelir.
- İşaretlemeni ve kodunu okuyan yapay zekâ ipuçları. Bir yerleşim bozulduğunda ya da bir bileşen ekrana gelmediğinde Bugsy tam olarak ne yazdığına bakar ve cevabı vermeden seni çözüme doğru iter.
- Bir işe alım uzmanının açabileceği projeler. Son adım sekiz gerçek proje - zaten bildiğin sayfaların klonları - her biri paylaşılabilir bir portföy parçası, üstüne ilk yedi adımdaki her kurs için ücretsiz bir sertifika.
Front end developer olmakla ilgili sık sorulan sorular
Front end developer nasıl olunur?
HTML, CSS ve JavaScript'i boş bir dosyadan bir sayfa kurabilecek kadar iyi öğren, üzerine TypeScript ve bir framework ekle (React güvenli tercihtir), Git'i öğren ve sonra eğitim videosuna bakmadan üç dört gerçek proje yapıp bunları internete koy. Bu yol tam olarak budur, bu sırayla. Projeler sertifikalardan daha çok önemlidir: bir front end portföyü, bir işe alım yöneticisinin otuz saniyede değerlendirebileceği tek şeydir.
Önce HTML mi, CSS mi, JavaScript mi öğrenmeliyim?
Önce HTML, sonra CSS, sonra JavaScript - ve en çok zamanı JavaScript'e ayır. HTML'de rahatlamak birkaç hafta, CSS'te bir ay sürer; JavaScript ise tam bir programlama dilidir ve kendi kendine öğrenen front end geliştiricilerin çoğunun köşe kestiği yerdir. Bu yol, herhangi bir framework görünmeden önce ona üç bölüm ve ayrıca bir DOM bölümü ayırır.
Front end developer olmak için TypeScript şart mı?
İş için neredeyse her zaman: profesyonel React ve Next.js kod tabanlarının büyük çoğunluğu TypeScript ile yazılır ve 'JavaScript' yazan bir ilan pratikte genellikle TypeScript demektir. JavaScript sağlamsa kısa bir adımdır; bu yüzden bu yolda en sonda değil, doğrudan React'tan önce durur.
React, Vue, Angular: hangi framework'ü öğrenmeliyim?
İstediğin belirli bir iş başka bir şey söylemiyorsa React. Açık ara en çok iş ilanı ona ait, ekosistemi en büyük olan o ve üzerine gelen Next.js, yeni üretim sitelerinin çoğunun kurulduğu araç. Fikirler - bileşenler, state, props, render - daha sonra Vue ve Angular'a bir iki haftada taşınır. Bu yol React ve Next.js öğretir.
Front end geliştirmeyi öğrenmek ne kadar sürer?
Günde bir saatle, portföyü olan bir junior seviyeye ulaşmak yaklaşık altı ila dokuz ay. Bu yolda HTML ve CSS birlikte altı sekiz hafta, JavaScript iki üç ay, TypeScript iki hafta, React ve Next.js altı hafta sürer; proje adımı ise sen üretmeye devam ettiğin sürece sürer. Önemli olan sayı bitirilen ders sayısı değil, bitirilen proje sayısıdır.
Bu yol test, erişilebilirlik veya state yönetimini kapsıyor mu?
Kendi kursları olarak hayır ve sayfayı şişirmektense bunu söylemeyi tercih ederiz. Erişilebilir sayfaların temeli olan anlamsal işaretleme HTML adımının parçasıdır ve React'ın kendi state yönetimi kapsanır; bir test kursu, daha derin erişilebilirlik çalışması ve bir state kütüphanesi müfredat yol haritasında yer alıyor ve yayınlandıklarında bu yola yeni adımlar olarak katılacaklar.
Sadece ücretsiz kurslarla front end işi bulabilir miyim?
Evet, kurslar bir portföy üretiyorsa - bu yolun sekiz projeyle bitmesinin sebebi tam olarak bu. İşverenlerin baktığı şey, açabilecekleri ve senin kurduğun bir sayfa, onu senin kurduğunu gösteren bir Git geçmişi ve bir yerleşimi ve bir bileşeni anlatabildiğin bir mülakattır. Üçü de bu yoldan çıkar; hiçbiri ücretli bir bootcamp gerektirmez.
