Bu yazıda frontend yani ön uç olarak Türkçeye çevrilen ve genelde websitelerinin kullanıcıya görünen yüzünü geliştirmeyi kapsayan frontend geliştiricisi olmak için bir yol haritası hazırladım
Photo by ThisisEngineering RAEng on Unsplash
Yazıya başlamadan önce : Bugün web geliştirme alanında çok fazla yol ve yöntem var, bu yazıda ben kendimce bir yol hazırladım, başka rehber eksik ya da fazla kaynaklar olabilir.
Not 2 : Bu yazı bir yol haritası yapısında hazırlanmıştır. Size gideceğiniz yolu gösterir fakat bilgiyi vermez.
Keyifli okumalar 🙂
İnternet nasıl çalışır öğrenerek başlayın 🌌
Öncelikle temelden başlayarak internet nasıl çalışır bunu basitçe anlamanız lazım. Sunucu nedir web sayfası nedir ve nasıl kullanıcıya ulaşır bu bilgilerin oturması lazım.
Bazı örnek konular
- Internet nedir : Büyük bir bilgisayar ağı olan internet nedir basitçe anlayın
- Http nedir : Web sayfalarının gönderilme kurallarını belirleyen http protokolü nedir nasıl çalışır öğrenin
- Domain ve Hosting nedir : Web sayfalarının bulunduğu veri merkezi Hosting ve web sayfalarının ismi olarak bildiğimiz Domain
- Tarayıcılar nasıl çalışır : Bize web sayfalarını derleyip gösteren uygulama nasıl çalışıyor
Web sayfasının iskeleti olan HTML nedir öğrenin 🚧
Bir web sayfasının iskeletini oluşturan html dosyasını daha önce duymuş olabilirsiniz. Web site yapmayı öğrenmeye başlanacak ilk işaretleme dili HTML’dir
Html bir programlama dili değil bir işaretleme dilidir bu yüzden öğrenmeye başlaması bir genel amaçlı programlama diline göre kolay olacaktır.
Bazı örnek konular :
- Html basit tagler: başlık paragraf elementi gibi basit konuları öğrenerek başlayın ve basit siteler yapın
- Farklı html tagleri : farklı html tagleri ne işe yarıyor bununla devam edin. a tagi ile web arasında gezinmeyi, img tagi ile görsel eklemeyi öğrenin ve basit siteler yapmaya başlayın
Webin tasarım aracı CSS ile devam edin ✨
Eğer biraz html öğrendiyseniz artık teknik olarak web sitesi yapabiliyorsunuzdur ama daha yolun başındayız. CSS olmadan web sitelerine renk boyut yazı tipi özelleştirme yapamayız ve web siteniz aşağıdaki gibi benim ilk html siteme benzer 😊
- Basit şeylerden başlayın : Yazıların ve arkaplanın rengini değiştirmek gibi basit şeyleri öğrenin, bu bile web sitenize canlılık getirir.
- CSS box model : CSS’de anladığınız an çoğu şeyin kafanıza yatacağı kutu modelini öğrenin. Tüm html elementleri box model denilen bir yapıyı takip ediyor. Margin padding border bunları öğrenin
- Elementleri yerleştirme : Benim tavsiyem Html elementlerinin ekrandaki konumunu kodlamak için css flexbox’u öğrenin
CSS kütüphanesi öğrenmek faydalı olabilir 🎁
CSS geniş bir konu bu yüzden biraz öğrenerek web sayfası tasarlamak başta zor olabilir. Bu aşamada size css kütüphaneleri yardımcı olur
CSS kütüphaneleri önceden şekillendirilmiş sınıflar içerir. Bunları kodunuzda kullanabilirsiniz.
- Bootstrap : en popüler ve nispeten basit bir kütüphane olan bootstrap‘a göz atın
- Tailwind : Css’de kendinize güvendikten sonra tailwindcss’e bakabilirsiniz.
Web’in dili Javascript 🔨
Web sayfalarının ana dili olan javascript ile birlikte dinamik websiteler oluşturabiliyoruz. Kod kullanarak css ve html’i etkileyebiliyoruz ve sunucu ile bağlantı kurabiliyoruz.
Web dev olmak için kesinlikle dünyanın en popüler dili javascripti öğrenmeniz gerekli olacak.
- Programlama : Eğer hiç programlama dili geçmişiniz yoksa temelleri öğrenerek başlayın
- Dom : Document object model nedir ve JS ile nasıl kontrol edilir öğrenin
- API kullanma : İnternetten dinamik bilgi çekmek için fetch() API kullanmayı öğrenin
Git ve Github 💾
Proje yönetimi ve dosya saklama gibi nedenlerden dolayı ek araçları öğrenmeniz gerekiyor
- Git : Versiyon kontrol olarak bilinen Git sistemini öğrenin
- Github : Kodlarınızı saklayabileceğiniz ve insanlara sunabileceğiniz github’ı öğrenin
Web frameworkü ile daha hızlı kodlayın 🦺
Bir javascript kütüphanesi öğrenerek normal web sayfayı yazma deneyiminden farklı şekilde JS ağırlıklı web siteler yazabilirsiniz. Bir framework öğrenmeden önce yeterli seviyede web bilginiz ve pratiğiniz olsun bunu unutmayın.
Çok fazla javascript frameworkü olduğu için başlangıçta kafanız karışabilir. İstediğinizden başlayabilirsiniz bir şey kaybetmezsiniz ama yine de bir öneri istiyorsanız React.js ile başlayabilirsiniz.
- En popüler : React.js şuan en popüler frontend frameworkü diyebiliriz.
- Alternatifler : Frontend dünyasında çok fazla alternatif var. Svelte Vue Angular vs. Kafanız karıştıysa hepsine biraz başlangıç olarak bakabilir ve karar verebilirsiniz.
- Önce Vanilla Js : Önce html css ve javascript kafanıza tam oturmadan React ve diğer frameworklere atlamamanız gerekiyor.
Web API kullanmayı öğrenin 📞
Kısaca web API’lar küçük bilgi paketleri taşıyan servislerdir. Örneğin bir web sitesi yaptınız ve hava durumunu göstermek için hava durumu bilgisi sağlayan bir firmadan API ile anlık hava durumu bilgisini çekebilirsiniz
API’lar bununla sınırlı değil çok büyük bir konu ve dinamik interaktif web siteleri yapmanızda işinize yarayacak.
- API nedir : Application programming interface‘in kısaltması olan ve uygulamalarla iletişim kurmanıza sağlayan API’lar nedir öğrenin
- Kodda API çağrısı : Javascriptte ve React.js uygulamanızda dışarıdan bir API ile nasıl iletişim kurulur öğrenin
Öğrenilebilecek Ek konular
Genel olarak ana hatlarıyla frontend web geliştirme temelleri bunlardı fakat bu dünyada daha çok konu var.
Bunların bazıları aşağıdaki gibi
- Test süreci : Uygulamalarınızın son hali çıkmadan önce çeşitli testler yapılması gerekir
- Web güvenliği : Https nedir, nasıl güvenli uygulamalar oluşturulur gibi konularda bilgi önemli
- Authentication : Auth yani kullanıcı üyelik ve giriş işlemleri gibi konular ileride karşınıza çıkacaktır
- Typescript : Javascriptin bir eklentisi olarak düşünebileceğiniz Typescript, JS’e Tür yapısını getirip projelerin daha güvenilir olmasını sağlıyor
- Server side rendering : Bu konu web uygulamalarının sunucuda oluşturulması ile alakalı. Örnek olarak Next.js Nuxt SvelteKit bu konuda yardımcı kütüphaneler
- Static site generators : React.js vs frameworkleri kullanarak düz html css js oluşturma yöntemine olan statik site oluşturucuları öğrenin. Örnek : Astro Gatsby Next.js
- Node.js ile backend geliştirme : Eğer isterseniz mevcut JS bilginizle node.js kullanarak sunucu tabanlı uygulamalar geliştirmek mümkün.
Son olarak…
Web geliştirme sürecini öğrenmek zorlu ve uzun olacak, baştan pes etmemeniz lazım. Bu süreçte bolca proje yapın ve programlama dillerini vs iyice anlamaya çalışın.
İngilizce yazılım konusunda çok önemli. Mecburen öğrenmeniz gerekecek çünkü bu yazıda da gördüğünüz gibi bazı terimleri ingilizce olarak kullandım. Çok iyi ingilizce konuşmanız gerekmiyor ama yabancı dildeki terimleri anlayın ve ingilizce makale ve eğitim yazıları gibi şeyleri genel olarak anlamaya çalışın size çok faydası olur.
Anlamadığınız şeyleri veya hataları Google’da arayıp bulmayı öğrenmeniz baya faydalı olur. Ayrıca Chatgpt gibi araçları da kullanabilirsiniz.
Ayrıca bu örnek yol haritasını hiç fikri olmayanlara bir fikir vermek için hazırladım. Web alanında o kadar çok yöntem ve araç var ki hepsini burada yazamam. Karşınızda yeni araçlar ve kütüphaneler çıkacaktır.
Frontend web dünyası çok hızlı gelişen bir alan. Yenilikleri takip etmeyi unutmayın.
Bazı ek kaynaklar
Size birkaç benim de kullandığım ek kaynak önerisi ekledim. Hiçbiri sponsorlu değil kendi kullandığım araçlar.
- Patika : İçerisinde bir çok eğitici kaynak olan Türkçe bir site. Eğitimlerin belirli müfredata göre ilerlemesi çok güzel. Ücretsiz
- Türkcell geleceği yazanlar : Turkcell’in Türkçe yazılım dersleri olan sitesi. Ücretsiz
- W3 Schools : Basit ve eğitici kaynakları olan sevdiğim bir site
- MDN dokümantasyonu : Mozilla vakfının web teknolojileri hakkında çok kapsamlı bir ansiklopedisi diyebiliriz.
- Fireship youtube kanalı : Web teknolojileri alanında faydalı videolar yapan bir kanal
- Udemy : İçinde Türkçe ve İngilizce binlerce kurs bulunan bir kaynak
