Web Geliştirme Öğren
Web Geliştirme Öğren — HTML'den React'e, canlı önizlemeyle frontend geliştirme
Web Geliştirme Öğren, web geliştiricisi olmak isteyen yeni başlayanlar, tasarımcılar ve kariyer değiştirenler için ücretsiz bir iOS ve Android uygulamasıdır. HTML, CSS ve JavaScript yan yana bir canlı düzenleyicide yer alır; sen yazdıkça alttaki sayfa güncellenir. 41 kurs ve 163 kısa ders, ilk etiketten responsive düzene, TypeScript'ten React ve Vue'ya kadar ilerlemeni sağlar; 20 rehberli proje, hata ayıklama görevleri ve bulamadığın hatayı çözmen için bir AI mentor içerir.
- Fiyat
- Ücretsiz, Pro yükseltmesi
- Platformlar
- iOS ve Android
- Diller
- 22
- Yaş derecelendirmesi
- 4+
- Gereksinimler
- iOS 15.1 veya sonrası
Bir satırı değiştir ve sayfanın nasıl değiştiğini gör.
Düzenleyici, HTML, CSS ve JavaScript panellerini yan yana, canlı önizlemeyi ise aşağıda gösterir. Böylece markup, stil ve davranış üç ayrı konu olarak değil, tek bir sayfa üzerinden birlikte öğrenilir.
Nedir
Web Geliştirme Öğren, insanların gördüğü ve dokunduğu kısım olan frontend geliştirmeyi telefondaki canlı HTML, CSS ve JavaScript düzenleyicisiyle öğreten ücretsiz bir iOS ve Android uygulamasıdır. Başlangıçtan senior seviyeye kadar derecelendirilmiş 41 kurs ve 163 ders sunar; web temelleri, responsive düzen, JavaScript ve DOM, TypeScript, React, Vue, test, erişilebilirlik ve performansı kapsar. Ayrıca rehberli projeler, hata ayıklama görevleri, mülakat soruları ve bir AI mentor içerir.
Uygulamanın içinde
Nasıl görünüyor
Kurs
Frontend kursunun kapsadığı konular
Uygulamanın kendi kurs listesinden alınan 41 kurs ve 163 ders: ilk HTML etiketinden frontend mimarisine ve senior seviyede mühendisliğe kadar.
Web ve Üç Temel
Frontend Geliştirmeye Giriş, Web Nasıl Çalışır, HTML Temelleri, CSS Temelleri ve JavaScript Temelleri.
Düzen ve Responsive Tasarım
Responsive Tasarımın Temelleri, HTML Formları ve Anlamsal İşaretleme, CSS Düzeninde Uzmanlaşma ve CSS Değişkenleri, Geçişleri ve Animasyonları.
Tarayıcıda JavaScript
DOM ve Tarayıcı API’leri, Diziler, Nesneler ve ES6+, Asenkron Programlama ve JavaScript Modülleri ile Build Tools.
İş Akışı ve Araçlar
Geliştirici Araçları ve İş Akışı, Git ve İş Birliği İş Akışı ve Modern Frontend Araçları.
TypeScript
TypeScript’e Giriş, Türler ve Arayüzlere Derinlemesine Bakış ve Frontend için İleri Düzey TypeScript.
React ve Vue
React Temelleri, useEffect ve Veri Çekme, İleri Düzey Hook’lar ve Kalıplar; ardından Vue 3 Temelleri, Composition API ve İleri Düzey Vue Kalıpları.
Veri, Render ve Gerçek Zamanlılık
Durum Yönetimi, API Entegrasyonu ve REST, Next.js ve Nuxt 3 ile Sunucu Taraflı Render, Progressive Web Apps ve WebSockets ile Gerçek Zamanlı Frontend.
Kalite ve Mimari
Erişilebilirlik, Frontend Testleri, Web Performansı Optimizasyonu, Frontend Güvenliği, CSS Mimarisi, Tasarım Sistemleri, Frontend CI/CD ve Senior Frontend Mühendisliği.
Nasıl çalışır
Uygulamayla nasıl öğrenirsin
Uygulamanın sıralaması, bu işin öğrenilme sırasını takip eder: önce bir sayfa oluştur, sonra ona davranış kazandır, ardından onu ölçeklendiren araçları öğren.
Ücretsiz ilk kursla başla
Welcome to Frontend Development, yolculuğun başlangıcını açar ve canlı düzenleyici en baştan ücretsizdir. Her ders, birkaç dakikalık açıklamanın ardından değiştirebileceğin ve çalıştırabileceğin bir uygulama sunar.
Bir paneli düzenle ve önizlemeyi incele
HTML'i, CSS'i veya JavaScript'i değiştir; aşağıdaki önizleme de buna göre güncellenir. Yeni projelere HTML, React, Vue, Angular, Node veya TypeScript şablonuyla başlayabilirsin.
Projeler oluştur ve gerçek hataları düzelt
Yirmi rehberli proje; tarif sayfası, iletişim formu, kart ızgarası, navbar ve veri tablosu oluşturmayı adım adım öğretirken, 15 hata ayıklama görevi sana onarman gereken bozuk sayfalar verir.
İçinde neler var
Uygulamayla gelenler
41
Başlangıçtan senior seviyeye kurslar
A1'den C2'ye kadar derecelendirilmiş 163 ders; web'in nasıl çalıştığı ve HTML temellerinden TypeScript, React, Vue 3, state management, Next.js ve Nuxt 3 ile server-side rendering ve progressive web apps'e kadar uzanır.
Canlı
Anında önizlemeli düzenleyici
HTML, CSS ve JavaScript panelleri ile altlarında bir önizleme bulunur; böylece yaptığın değişiklik hemen görünür. Yeni projelere çeşitli framework şablonlarıyla başlayabilirsin.
15
Hata ayıklama görevleri
Gerçek frontend sorunlarından oluşturulmuş görevler: 375 pixels'te bozulan bir düzen, sayfayı yavaşlatan bir görsel, klavyeyle kimsenin erişemediği bir form, bir component'teki memory leak ve yerelde geçen ama CI'da başarısız olan bir test.
20
Rehberli projeler
Tarif sayfası, iletişim formu, kart ızgarası, navbar ve veri tablosu gibi küçük uygulamalar, her adım tek tek açıklanarak oluşturulur.
AI
AI mentor ve playground
Bir hata, ders veya kendi kodun hakkında soru sorabilir ya da AI playground'da bir sayfayı tarif ederek kodun yazılmasını izleyebilirsin. Ücretsiz kullanıcılar günde üç AI sorusu sorabilir.
50
Yanıtlarıyla birlikte mülakat soruları
Yanıtlarıyla birlikte elli frontend ve web geliştiricisi mülakat sorusu; ayrıca sözdizimi ve kalıplardan oluşan 83 maddelik bir cheat sheet ile açıp düzenleyebileceğin kısa örneklerden oluşan bir kütüphane.
Arka plan
Bir frontend geliştirici gerçekte ne öğrenir ve bunu hangi sırayla öğrenir?
Bir frontend geliştirici, tarayıcıda çalışan şeyleri oluşturur: bir sayfanın yapısını, her ekran boyutunda nasıl göründüğünü ve biri tıkladığında, yazdığında ya da kaydırdığında nasıl tepki verdiğini. Mantıklı sıra önce yapı (HTML), sonra sunum (CSS), ardından davranış (JavaScript) ve ancak bundan sonra daha büyük projeleri düzenleyen araçlardır: TypeScript, React veya Vue gibi bir framework, test ve build adımı. Üç temel konuyu öğrenmeden bir framework'e geçmek, yeni başlayanların takılmasının en yaygın nedenidir; çünkü framework çoğunlukla düz JavaScript'i ve DOM'u kendi sözdiziminin arkasında gizler.
Semantik HTMLgörünüşten önce anlam
İçeriğin nasıl görünmesi gerektiğine göre değil, ne olduğuna göre bir başlık, liste, form etiketi veya düğme seçmek; ekran okuyuculara, arama motorlarına ve klavyelere çalışabilecekleri bir yapı sunar. Ayrıca herhangi bir sayfada erişilebilirlik açısından elde edilebilecek en düşük maliyetli kazanımdır.
Responsive düzentek sayfa, her ekran
Flexbox, grid ve media queries, tek bir düzenin dar bir telefondan geniş bir monitöre kadar kendini yeniden düzenlemesini sağlar. 375 pixels gibi küçük bir genişlikte erken test yapmak, daha sonra düzeltilmesi zahmetli olan düzen hatalarını yakalar.
DOMcanlı bir nesne olarak sayfa
Tarayıcı, HTML'i JavaScript'in okuyup değiştirebileceği bir nesne ağacına dönüştürür. Her framework, sonuçta bu ağacı güncellemenin kullanışlı bir yoludur; bu yüzden ağacı anlamak React ve Vue'yu kavramayı çok daha kolaylaştırır.
Core Web Vitals ve performansinsanların hissedebileceği hız
Büyük ve optimize edilmemiş bir görseli geç yükleyen ya da yüklenirken kayan bir sayfa, kod doğru olsa bile yavaş hissettirir. Performans, ancak gerçek sayfalar ve gerçek görseller işin içine girdiğinde ortaya çıkan bir beceridir.
Uygunluk
Kimler için uygun — kimler için değil
Şu durumlarda senin için uygun
- Web geliştiricisi olmak istiyorsan ve sıfırdan başlıyorsan
- Tasarladığın sayfaları oluşturmak isteyen bir tasarımcıysan
- Biraz HTML ve CSS biliyorsan ve bunların üzerine JavaScript, TypeScript, React veya Vue öğrenmek istiyorsan
- İlk frontend mülakatına hazırlanıyorsan ve cevaplarıyla birlikte sorular istiyorsan
- Uzun açıklamalar okumak yerine yazarken bir sayfanın değişimini görmeyi tercih ediyorsan
Şu durumlarda doğru araç değil
- Büyük ve birden fazla dosyadan oluşan bir site oluşturup yayınlaman gerekiyorsa; bunun için yine bir laptop ve tam özellikli bir editör gerekir
- Her şeyin ücretsiz olmasını bekliyorsan: ilk kurs, ilk proje, iki hata ayıklama görevi ve editör ücretsizdir; geri kalanların kilidini Pro açar
- Backend veya veritabanı kursu istiyorsan; çünkü bu öğrenme yolu tarayıcıda çalışanlarla ilgilidir
- Zaten senior frontend mühendisi olarak çalışıyorsan ve derslerden çok bir başvuru kaynağı istiyorsan
Sorular
Sık sorulan sorular
Frontend geliştirme nedir?
Frontend geliştirme, bir web sitesinin veya web uygulamasının tarayıcıda çalışan bölümünü oluşturmaktır: HTML ile yapısı, CSS ile görünümü ve JavaScript ile davranışları; ayrıca bunların üzerine kurulan framework’ler ve araçlar. Web Geliştirme Öğren, her değişikliği anında görebileceğin canlı önizlemeyle bu teknoloji yığınını aynı sırayla öğretir.
Frontend geliştirmeyi telefonumda öğrenebilir miyim?
HTML, CSS ve JavaScript kısa oturumlarda düzenlenebilecek kadar küçük olduğu ve önizleme sonucu anında gösterdiği için temel kavramları ve ilk sayfaları telefonda rahatça öğrenebilirsin. Uygulama, üç bölmeyi ve canlı önizlemeyi ekrana getirir. Çok sayıda dosyası olan daha büyük bir projeyi yönetmeye başladığında laptop daha kullanışlı olur; ancak başlamak için gerekli değildir.
Kimler için uygun ve tamamen yeni başlayan biri nereden başlamalı?
Tamamen yeni başlayanlara, tasarladıklarını oluşturmak isteyen tasarımcılara, biraz HTML ve CSS bilen geliştiricilere ve ilk frontend işine hazırlanan kariyer değişikliği yapanlara uygundur. Web’in nasıl çalıştığını ve yalın HTML’i öğrenerek başla, ardından CSS’e ve sonra JavaScript’e geç. Web Geliştirme Öğren bu sırayı izler ve ücretsiz Welcome to Frontend Development kursuyla başlar.
Uygulama React ve Vue öğretiyor mu?
Evet. HTML, CSS, JavaScript ve TypeScript’ten sonra uygulamada React temelleri, useEffect ve veri çekme, ileri düzey hook’lar ve kalıplar üzerine kurslar; ayrıca Vue 3 temelleri, Composition API ve ileri düzey kalıplar üzerine kurslar bulunur. Bunun yanında durum yönetimi ile Next.js ve Nuxt 3 kullanarak sunucu taraflı render konuları da ele alınır.
TypeScript öğrenmem gerekir mi?
İlk sayfanı oluşturmak için gerekli değildir; ancak profesyonel React ve Vue kod tabanlarının çoğu bunu kullandığından JavaScript temellerinden sonra öğrenmeye değer. Uygulama TypeScript’i ilk türler kursuyla, türler ve arayüzler üzerine daha kapsamlı bir kursla ve frontend kalıpları için ileri düzey bir kursla tanıtır.
Hata ayıklama görevleri nasıl çalışır?
15 hata ayıklama görevinin her biri, 375 pikselde bozulan bir düzen, klavyeyle kullanılamayan bir form, bir bileşendeki memory leak veya yalnızca CI’da başarısız olan bir test gibi gerçek bir frontend sorununu yansıtan bozuk bir sayfa ya da bileşen sunar ve sen bunu düzeltirsin. İki görev ücretsizdir.
Frontend geliştirici mülakatına hazırlanmama yardımcı olabilir mi?
Bilgi tarafında yardımcı olabilir. Web Geliştirme Öğren, cevaplarıyla birlikte 50 mülakat sorusu, sözdizimi ve kalıplardan oluşan 83 maddelik bir başvuru özeti ve temel konulardan sonra mülakatlarda sıkça geçilen test, performans, erişilebilirlik ve mimari üzerine kurslar sunar. Kendi projelerinden oluşan bir portföy oluşturmanın yerini tutmaz.
Frontend geliştirmeyi öğrenmek ne kadar sürer?
Her gün biraz pratik yapan bir başlangıç seviyesindeki öğrenci genellikle birkaç hafta içinde basit responsive sayfalar oluşturabilir; kendine güvenen JavaScript bilgisi ve bir framework öğrenmek ise aylar sürer. Uygulama, öğrenme yolunu her biri birkaç dakika süren derslere böler ve serilerle hatırlatıcılar sunar; böylece ilerleme tek seferde uzun bir çalışma yerine düzenli, kısa oturumlarla sağlanır.
Web Geliştirme Öğren ücretsiz mi?
App Store ve Google Play üzerinden ücretsiz indirilebilir. İlk kurs, ilk rehberli proje, iki hata ayıklama görevi ve kod editörü ücretsizdir; ayrıca günde üç AI mentor sorusu sunulur ve ücretsiz sürüm reklam gösterir. Pro tüm kursların, projelerin ve görevlerin, sertifika sınavının ve sınırsız AI kullanımının kilidini açar; ayrıca reklamları kaldırır.
Hangi platformları ve dilleri destekliyor, App Store uygulaması aynı mı?
Web Geliştirme Öğren, App Store üzerinden iOS’ta ve Google Play üzerinden Android’de çalışır; 22 dili destekler ve 4+ yaş derecelendirmesine sahiptir. App Store listelemesinin adı Learn Frontend Development, Google Play listelemesinin adı ise Web Geliştirme Öğren’tır; ancak ikisi de aynı uygulamadır. Final sınavını geçmek, tamamlanma sertifikası kazandırır.
Başla
İlk web sayfanı bugün oluştur
iOS ve Android'de 22 dilde ücretsiz başlayabilirsin.
CoddyKit'ten daha fazlası
iOS üzerinde kullanılabilir.