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.
663,032+ codder bu kurslara kayıtlı
804 ders681 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 sayfa - 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 ders
- Instagram Sayfası Klonu | Front-End ProjesiYalnızca html16 ders
- Netflix Giriş Sayfası Klonu | Front-end projesiYalnızca html19 ders1 görev
- Slider | Front-end ProjesiYalnızca html23 ders1 görev
Neler elde edersin
Kod yazmayı öğrenmek için kullanacağın her şey
Learn by Doing
Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.
playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Input
"Alex"
Output
"Hello, Coddy! Alex"
Build Your Coding Streak
Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.
12 days streak
Return tomorrow to keep your streak!
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
Double or Nothing
Day 5 of 7
Streak Freeze
2 left
Code Anywhere, Anytime
Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.
7
250
5
Variables
CONTINUE
4.9
Rating
You're Not Alone in This
Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!
Challenger LeagueTop 7 advance
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Promotion zoneEvery way to learn
Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.
Intro to Variables
Audio
A variable is a named container that stores a value you can reference later in your program.
In Python, you create one by writing the name, an equals sign, then the value you want to store.
The value can change over time - reassigning the name simply points it to a new value.
1xSarah
Prove Your Skills
Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.
Certificate of CompletionThis certifies thatJohn Doehas successfully completedPython Fundamentals
Python Fundamentals
DateJan 2026
Add to LinkedInFront 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.
