Web Tasarım

Web Geliştirici Front-End Yol Haritası – 2022

Yazılım, ilk başladığınızda içinde kaybolmanız oldukça muhtemel bir labirente benzer. Özellikle de kendi kendinize öğrenmeye çalıştığınız zaman!

Tam olarak hangi alana yöneleceğiniz, takip etmeniz gereken kaynaklar gibi sorular yazılım dünyasına ilk girdiğinizde cevaplaması sıkıntılı sorular olabilir. Her kaynak doğru bilgi içermeyebilir veya oluşturduğunuz üründe fonksiyonellik yerine görsellikle ilgileniyor olabilirsiniz; hatta iki alan da ilgi duyuyor olabilirsiniz.

Bu yazımızda, yazılım gibi geniş bir alanda kaybolmamınız için bir yol haritası oluşturacağız. Bu yol haritası ile Kullanıcıların gözlerine hitap eden bir ürün oluşturmayı sağlayan front-end kısmını detaylı bir şekilde inceleyeceğiz. Back-end tarafını da bundan sonraki yazımızda yine detaylı bir şekilde incelemekte olacağız. Ayrıca yazıda yer verdiğimiz kaynaklar sayesinde kafanızda oluşacak soruların cevabını bulabilir, öğrenme sürecinde kullanmayı sürdürebilirsiniz.

Web Geliştirici Front-End Yol Haritası

Front-End, Back-End Ve Full-Stack Geliştirici Olmak Ne Demek?

Giriş kısmında bahsettiğimiz bu terimler hakkında; aslında yazılım maceranızın en başında iseniz, çok kafa yormanıza gerek yok. Öğrenme sürecine front-end ya da back-end gibi daha özelleşmiş konularla başlamak, bazı temel şeyleri kaçırmanıza yol açabilir. Fakat yine de yüzeysel olarak bilmeniz işinize yarayabilir.

Front-end, kullanıcının görebildiği kısıma yoğunlaşır yani sitemize girdiğinizde gördüğünüz bütün bileşenler, sayfa tasarımları, tasarımda etkileşime geçtiğiniz bir butonun sizi başka bir adrese yönlendirmesi, sayfa içindeki animasyonlar gibi çoğaltabileceğimiz birçok örnek front-end’in ürünüdür.

Back-end kısmı ise, front-end tarafından gönderilen isteklerini karşılayan kısımdır. Bu istekler arasında, giriş istekleri (e-mail ile giriş yapmak gibi), veri tabanı işlemleri (bir siteye kayıt olduğunuzda bilgileri veri tabanına kaydetmek veya üyeliğinizi sildiğiniz zaman veri tabanından bilgileri silmek gibi) veya validasyon gibi işlemler vardır. Kısacası back-end kodları arka planda çalışarak fonksiyonelliği sağlar.

Full-stack ise, back-end ve front-end’in ikisinin de yapıldığı alandır.

Öğrenilmesi Gereken Temel Kavramlar

Seçtiğiniz yol haritası Front-end ya da Back-end olsun, her geliştiricinin takım çantasında bulundurması gereken teknolojiler ve temel bilgileri aşağıda sıraladık!

İngilizce

Öncelikle KESİNLİKLE ingilizcenizi geliştirmelisiniz. İnternette güvenilir birçok kaynak (stackoverfloww3schoolshackerrank gibi) ingilizce olduğundan dolayı; en azından bu kaynakları çok zorlanmadan anlayabilecek seviyeye gelmeniz sizin için çok yararlı olacaktır. Ayrıca takıldığınız bir yerde aradığınız çözümü ingilizce olarak bulabilmeniz çok daha muhtemel olacaktır.

İnternetle Alakalı Cevaplanması Gereken Sorular

İnternet Nasıl Çalışır?

Çalışmalarınızı internet ortamında kullanıma sunmadan önce, internetin nasıl çalıştığını ve ne olduğunu öğrenmeniz internet üzerindeki hakimetinizi arttıracaktır. Böylece ağ temelli bir sıkıntı oluşursa, sıkıntıyı çözemeseniz bile en azından tanımlayarak çözüm sürecini hızlandırabilirsiniz.

Patika’daki Herkes İçin Temel Dersler modülünü takip ederek, okuduklarınızı pekiştirebilirsiniz. Ayrıca aşağıdaki Youtube videosu da yüzeysel olarak bilgi edinmenizi sağlayacaktır.

GIT

GIT, kısaca anlatmak gerekirse bir versiyon kontrol sistemidir. Örneklemek gerekirse; toplama, çıkarma, bölme ve çarpma fonksiyonlarını barındıran bir hesap makinesi yazdınız. Uygulamanızın kaynak kodununun orjinal halini GIT aracılığı ile bilgisayarınızda tutabiliyorsunuz. İleride başka bir fonksiyon eklemeye karar verdiğinizde GIT kaynak kodu değiştirmeden eklemeler yapılmasına olanak sağlar, bu şekilde de eğer yeni yazılan kodlarda hata yapılırsa eski kaynak koduna geri dönülebilir.

 Git Nedir? Git Neden Kullanılmalı?

Öğrenmenizi pekiştirmek isterseniz, Patika‘da bulunan videolu anlatımları izleyebilir ve bölüm sonundaki ödevleri yapabilirsiniz. Patika’ya alternatif olarak aşağıdaki Youtube videosunu da GIT’in temellerini öğrenmenize yardımcı olacaktır.

GitHub

GIT kaynaklarını incelediyseniz, GitHub oldukça sık bir şekilde önünüze çıkmıştır. GitHub, GIT repository’lerinizi depolamanıza yarayan bir bulut hizmetidir. Yazılımcılar için sosyal medya da denebilir. Repositorylerinizi GitHub üzerinde insanlarla paylaşabilir, aynı şekilde başka projeleri görüntüleyebilir ve hatta kaynak kodlarını indirebilirsiniz.

GitHub Student Pack

Söylemeden de geçmeyelim, GitHub öğrenciler için ücretsiz olan yazılımda hangi noktada olursanız olun işinize yarayacak harika bir pakete sahip. Yukarıda paylaştığımız GitKraken veya online olarak tasarım yapabileceğiniz CanvaEducativeveya Datacamp gibi öğrenme platformlarında ücretli olan üyeliklerden, ücretsiz bir şekilde yararlanabilirsiniz! GitHub Student Pack’e buradan kayıt olabilirsiniz!

Tarayıcılar Nedir, Nasıl Çalışırlar?

Tarayıcılar, dünya çapında herkes tarafından internete erişmek amacıyla en çok kullanılan yazılımlar. İnternette yayınlanacak projelerinizi kullanıcılar, tarayıcılar aracılığı ile görüntüleyecekler. Tarayıcıların genel yapısını ve arka planda nasıl çalıştığını bilmeniz, projenizi oluştururken sınırlarınızı belirlemenizi ve dolayısı ile daha düzgün uygulamalar yapabilmenize olanak sağlayacaktır.

HTTP Nedir?

HTTP protokelleri, web geliştiriciler için temel bilgilerin başını çeker. İnternet ortamında geliştirdiğiniz projeleri yayınladığınızda, tarayıcı siteniz hakkındaki bilgileri HTTP protokolleri sayesinde edinir. Bu protokolleri tam olarak bilmemeniz; sitenizin internetle olan iletişim yapısını düzgün kuramamanıza sebep olabilir, sonuç olarak sitenizin yavaş yüklenmesi, yüklenmemesi, gereken bilgilerin getirilememesi gibi hatalara yol açabilir.

SSH Nedir?

SSH, kısaca uzak sunucu bağlantı kontrolleridir. Sitenizin güvenliği için; login protokolleri ve dosya aktarım protokolleri içerir. Güvenlik kontrolleri dışında bağlanılan sunucu üzerinde komut çalıştırma gibi işlere de yarar.

DNS Nedir, Nasıl Çalışır, Domain Adı (Alan Adı) Nedir?

İnternete bağlı olan cihazların (sitelerin sunucuları, evlerimizdeki modemler gibi) kendine özel IP’leri vardır. Cihazlar, bu IP’ler ile birbirini tanır fakat insanlar için internet kullanırken sitelere IP yazarak erişmek pek kolay bir iş değil. Çünkü IP’ler sayısal dizilerdir. Örneğin Google’a girmek istiyorsunuz. Bunun için adres barınıza 8.8 8.8 IP değerini girmelisiniz. Peki nasıl oluyor da Google yazdığımızda istediğimiz sayfaya yönlendiriliyoruz? Bu sorunun cevabı DNS(Domain Name Server). DNS aracılığı ile, her IP’nin kendine özel anlaşılabilir bir ismi yani domain adları (alan adları) olur.

Hosting Nedir?

Sitenizin, kesintisiz bir şekilde internet üzerinde yayınlanmasına yarayan hizmet, “hosting” olarak adlnadırılır. WordPress, Linux, Windows, Kurumsal, Bulut gibi hosting hizmetleri bulunur. Bu hizmetlerin sunduğu olanaklar faklıdır, bu nedenle hosting seçimi yaparken sitenizin ihtiyaçlarını göz önünde bulundurmalısınız.

Terminal Komutları

Yazılım projelerinde bazen, terminal komutları kullanmak durumunda kalınabiliyor. Projeleri çalıştırmak veya debuglamak gibi birçok temel işi kullanıcı arayüzü kullanmadan hızlı ve güvenli bir şekilde terminalden halledebilirsiniz. Büyük projelerde, kütüphane yüklemesi yaparken kullanılan komutları anlamanız ve hakim olmanız için; kullandığınız işletim sistemine ait olan bazı temel komutları öğrenmek işinize oldukça yarayacaktır.

Veri Yapıları Ve Algoritmalar

Genel adımları atlattıktan sonra, işin teknikleştiği ilk adım veri yapıları ve algoritma konusudur. Algoritma programlamanın temelini oluştururken, veri yapıları projenizi oluşturan yapı bloklarıdır. Yani bu konuları bilmeden oluşturduğunuz projeler; bir noktada kırılacak, onarması imkansız olacaktır.

Algoritmalar

Kısaca açıklamak gerekirse; algoritma, yazdığınız programın yol güzergahıdır. Karşılaştığınız problemi çözerken izleyeceğiniz yolun ayrıntılı bir şekilde işlenmiş halidir. Algoritma kavramını tam olarak oturtmadan oluşturucağınız birçok projede, çözüm yolunu belirlemediğiniz için yanlış veri yapıları veya kütüphaneler kullanacağınız için zaman kaybedersiniz ve çözüme ulaşamazsınız.

Aşağıdaki videodan, algoritma kavramını sıfırdan ileri seviyeye örneklerle birlikte inceleyebilirsiniz.

Veri Yapıları

Algoritmaları öğrendikten ve pekiştirdikten sonra belirli bir programlama dilinin veri yapılarını öğrenmeye başlayabilirsiniz. Veri yapıları, oluşturduğunuz programda verilerin etkin saklanması sağlayan yapı taşlarıdır. Bu nedenle programınızın temelini oluştururlar.

Veri yapıları ve algoritmalarını JavaScript ile ayrıntılı bir şekilde uygulamalar yaparak öğrenmek için github’da çeşitli kişiler tarafından oluşturulmuş bu repository‘i inceleyebilirsiniz! Repository’nin READ.MEdosyasında işlenilen konular detaylı bir şekilde türkçe olarak anlatılıyor, bu yönergeden başlangıç seviyesi için “B” ile etiketlenen konuları öğrenebilirsiniz.

Front-End Geliştirici Yol Haritası

İnternet ve yazılımla alakalı temelleri aldıktan sonra front-end alanında devam etmek istiyorsanız yapmanız gereken ilk iş bir web sitesinin iskeletini basit seviyede oluşturmayı öğrenmek olmalı. Yani web’in 3 silahşörleriyle başa çıkabilmeniz, gördüğünüz zaman kendileriyle selamlaşabilmeniz lazım ?

Web Geliştirme Temelleri

Bu bölümde paylaştığımız kaynakların birçoğu, egzersizler ve projeler içeriyor. Konu anlatımını izledikten sonra egzersizleri yapmanız, konunun daha iyi oturmasına yardımcı olacaktır. Ayrıca gelişmenizi gözlemleyebilmek için, yazdığınız kodları GitHub’a atabilirsiniz!

HTML

HTML, web sitelerinde gördüğünüz içerikleri oluşturan bir metin düzenleme dilidir. Yani HTML’in kendisi bir yazılım dili değildir. Bu nedenle sadece HTML kullanarak full fonksiyonel ve göze hoş gelen bir web sitesi oluşturmak mümkün değildir.

Web’in üç silahşörlerinden olan HTML bu üçlünün kemiklerini oluşturur. Tam bir web sitesi oluştururken görsellik ve efektif kullanım için yazdığınız her şeyi HTML ile yazdığınız kemik yazının üstüne oluşturursunuz.

CSS

CSS, HTML’in oluşturduğu kemiklerin üstünü kaplayan kaslardır. Sitenin görselliğini yani içeriklerin yerleri, renkleri, büyüklüğünü ve esnekliğini CSS kullanarak elde edersiniz.

Hem konu anlatımı hemde egzersizlerin bulunduğu kaynakları aşağıdan inceleyebilirsiniz!

JavaScript

Web temellerinin son silahşörü olan JavaScript, oluşturulmuş içeriklere aksiyon ve dinamiklik ekler.

Hem konu anlatımı hemde egzersizlerin bulunduğu kaynakları aşağıdan inceleyebilirsiniz!

Frameworkler

Framework Nedir?

Frameworkler, uygulamanız için temel görevini gören yapılardır, kodunuzu sıfırdan başlayarak inşaa etmek yerine önceden oluşturulmuş fonksiyonlar üzerinde oynama yaparak işinizi azaltır ve zaman kazandırır. Framework kullanarak yazdığınız kodlar:

  • Hata yapma riski daha az
  • Daha güvenli
  • Test ve debuging daha kolay olacaktır.

Bootstrap

Bootstrap, responsive ve mobil odaklı siteler oluşturmak için kullanılan bir framework’tür. HTML, CSS ve JavaScript ile yazılmış hazır kod parçaları sayesinde sitenizde boyutlandırmayla uğraşmadan hızlıca sitenizi oluşturabilirsiniz! Ayrıca Bootstrap’in içerdiği componentları, isteğinize göre stillerini değiştirme olanağınız da var!

Hem konu anlatımı hemde egzersizlerin bulunduğu kaynakları aşağıdan inceleyebilirsiniz!

React

React, JavaScript tabanlı UI (user interface – kullanıcı arayüzü) geliştirme kütüphanesidir. Facebook’un geliştirdiği bu kütüphane ile dinamik ve hızlı web uygulamaları geliştirebilirsiniz. Üstelik HTML ve JavaScript konseptleri içerdiği için öğrenme süresi yeni bir yazılım dili öğrenmekten çok daha kısa!

React’ın yapısı dolayısıyla uygulama derinleştikçe verilerin nerden geldiğini takip etmek zorlaşır. Veri erişiminin tek bir yerden gelmesini ve state problemini çözmek için Redux kavramını oluşturulmuştur.

Angular

Angular, Google tarafından geliştirilen TypeScript tabanlı geliştirme platformudur. MVC (Model View Controller) yapısına bağlı olarak geliştirme yapılır. Bu nedenle uygulamanızı modüllere bölüp küçük parçalar üzerinde çalışabilirsiniz, proje yönetimi kolaydır. Eğer .net gibi MVC yapıları kullanıyorsanız Angular’a kolaylıkla hakim olabilirsiniz.

Vue.js

Vue.js, kullanıcı arayüzleri ve tek sayfa web uygulamaları geliştirmeyi sağlayan bir Javascript kütüphanesidir. Bu kütüphane, geliştiricilerin ihtiyaçlarına göre esneyip adapte olabildiğiğnden dolayı tercih edilir. Diğer frameworkler kendi fonksiyonları ile indirilirip çalıştırılırken, Vue.js script etiketi ile kullanılır. Ayrıca Virtual DOM sayesinde yükserk performansa sahiptir ve test edilebilirdir.

Bu linkten kadameli olarak egzersizlerle Vue.js öğrenebilirsiniz!

Sonuç Olarak

Yazılım ve web geliştirme kaynaklarının asla bitmediği sürekli gelişmelere tanık olan alanlar. Bu nedenle öğrenme kaynakları da oldukça bol. Yazımızda yeni başlayanlara uygun kaynakların bir kısmını paylaştık fakat, kendi öğrenmenize uygun farklı kaynaklar bulmanız oldukça mümkün.

Araştırmayı ve pratik yapmayı bir alışkanlık haline getirebildiğiniz zaman, geliştirdiğiniz uygulamalardan daha da zevk alacak, ortaya çıkan projelerin daha da kullanılabilir olduğunu siz de mutlaka fark edersiniz. Uzun lafın kısası, asla araştırmaya ve gelişmeye korkmayın!

Tebrikler, web geliştirici yol haritamızın sonuna geldiniz ve oldukça uzun bir yolun başlangıç adımını attınız! Umarım başlangıç noktanız için iyi bir referans olabilmişizdir. Bundan sonraki adımlarınızı bizimle paylaşmayı ve yazı hakkındaki yorumlarınızı bizlerle paylaşmayı unutmayın. Mutlu kodlamalar, kendinize iyi bakın ! ?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.