Front End Developer Nedir? Nasıl Olunur?

Front-end terimi, web sitelerinin kullanıcı arayüzüyle ilgili olan kısmını ifade eder. Bir web sitesi oluşturulurken, kullanıcının göreceği görünüm, içerik ve tasarımsal unsurları kapsayan işlemler front-end olarak adlandırılır. Web sitesine girdiğinizde renkli temalar, arka planlar, yazı tipleri, tasarımsal görseller ve bunların kullanıcıya uygun şekilde düzenlenmesi front-end işinin bir parçasıdır. Bu işle uğraşan ve geliştiren kişilere front-end developer veya önyüz geliştirici denir. Web sitesi oluşturulurken, kamera önü ve kamera arkası gibi bir film seti gibi düşünebiliriz. Kamera önü, kullanıcının gördüğü her şeyi içerirken, kamera arkası ise teknik ekiplerin ve altyapının bulunduğu kısmı temsil eder. Bir filmde izleyicinin gördüğü oyuncular, mekanlar, olaylar front-end’e örnek olarak verilebilirken, teknik ekipler ve ekipmanlar back-end’i temsil eder.

Bir front-end developer olabilmek için, bu alandaki terimlere hakim olmak ve gerekli becerilere sahip olmak gerekmektedir. Özellikle başlangıç seviyesindeki geliştirici adayları için, bu konuda detaylı araştırma yapmak önemlidir. Kullanıcı olarak kendimizi düşündüğümüzde, web sitelerinde gördüğümüz sayfalardaki tüm aktivitelerin son derece incelikli ve uzun süreçler sonucunda elde edildiğini bilmemiz önemlidir. Tasarımlar oluşturulurken verilen emeğin, son kullanıcı tarafından görülen sonuçlardan daha fazla olduğu açıktır. Bu nedenle, başlamadan önce yapılacak araştırmaların detaylı ve çok yönlü olmasına özen gösterilmelidir.

Front-end Developer Ne İş Yapar?

Front-end geliştiriciler, HTML, CSS ve JavaScript gibi üç temel programlama dilini kullanarak kullanıcıların ilk karşılaştığı web sayfalarının tasarımını ve oluşturulmasını gerçekleştiren kişilerdir. Bu arayüzlerin “dil” olarak adlandırılmasının doğru bir özelliği vardır. Bu programlama dilleri, farklı karakterler ve sözcükleri birleştirerek kendine özgü bir yazım ve imla oluşturur. Diğer dillerden tek farkı, genellikle İngilizce kelimelerden oluşan kodlardan oluşması ve bu kelimeleri farklı karakterlerle birleştirerek farklı bir dil oluşturmasıdır.

Aşağıda, bir front-end geliştiricinin sahip olması gereken donanımsal ve bilimsel özellikler ile yapabildikleri işlemler sıralanmıştır:

1. İlk olarak, front-end geliştiricinin bu üç temel programlama dilinin ne anlama geldiğini ve ne işe yaradığını anlaması ve akademik kaynaklardan araştırma yapması önemlidir. Bu, başlangıç için önemli bir adımdır.
2. Front-end’in kendi içinde alt bölümleri bulunur. Metinlerle, görsellerle ilgili düzenlemeler, yazı tipi, renk, görünüm, görsel boyutu ve arka planı gibi konuları kapsar. Bunun yanı sıra, yazılan metinlerin ve görsellerin sayfaya yerleştirilmesi ve sayfanın yapılandırılmasıyla ilgili konular başka bir alt bölümdür. Bu alt bölümle ilgileniyorsanız, JavaScript dili bilmeniz yeterlidir. Diğer arayüzleri kullanmanıza gerek yoktur. Ancak metin ve görselleri oluşturmak istiyorsanız, bu üç dili de bilmek önemlidir. Tasarımcı olarak çalışmak istiyorsanız, uzmanlaşmak istediğiniz alanda tek bir dilde yetenekli olmanız yeterlidir.
3. Araştırmalar yapıldıktan sonra, geliştiricinin kod yazmaya başlaması gerekmektedir. Bu aşamaya geçebilmek için araştırmaların titizlikle yürütülmüş olması önemlidir.
4. Kodlar yazılmaya başlandıktan sonra, tamamlanmamış veya henüz başlanmamış, geliştirilme ve düzenlenme aşamasında olan web sitelerinde çalışmaya başlamak önemlidir. Tamamlanmış ve yalnızca düzeltmeler yapılan web sayfalarında, henüz yeni öğrenilen ve pratikte kullanılmayan teorik bilgileri kullanmak zor olabilir veya zorluk çıkarabilir. Bu nedenle, basit kodlarla oluşturulabilecek bir web sayfası deneyerek pratik yapmak faydalı olabilir.

Front-end geliştiriciler, kullanıcıların web siteleriyle etkileşimini sağlayan önemli bir rol oynarlar ve web tasarımının kullanıcı deneyimine katkıda bulunurlar. Bu nedenle, programlama dillerini ve web teknolojilerini iyi bir şekilde öğrenmek ve uygulamak önemlidir.

Front-end Developer Olmak İçin Bilmeniz Gerekenler

Front-end geliştirici olmak için kullanılan donanımsal programlar şunlardır:

1. HTML (HyperText Markup Language): Web sayfalarının yapısal ve içeriksel bileşenlerini tanımlamak için kullanılan bir işaretleme dilidir. HTML, metin, başlık, bağlantılar, tablolar, form alanları gibi öğeleri kullanarak sayfanın yapısını oluşturur.
2. CSS (Cascading Style Sheets): Web sayfalarının görsel görünümünü düzenlemek için kullanılan bir stil dilidir. CSS, HTML öğelerine uygulanarak renkler, yazı tipleri, arka planlar, kenarlıklar, konumlandırmalar gibi görsel özelliklerin belirlenmesini sağlar. Bu şekilde, web sayfaları daha estetik ve kullanıcı dostu hale getirilebilir.
3. JavaScript: Web sayfalarında etkileşimli ve dinamik özellikler eklemek için kullanılan bir programlama dilidir. JavaScript, HTML ve CSS ile birlikte kullanılarak kullanıcı etkileşimleri, form doğrulama, animasyonlar, veri işleme gibi işlevlerin gerçekleştirilmesini sağlar. Bu sayede web sayfaları daha interaktif ve işlevsel hale getirilebilir.

Bu üç programlama dili, front-end geliştiricinin temel araçlarıdır. HTML sayfa yapısını tanımlarken, CSS görsel tasarımı sağlar ve JavaScript etkileşimli işlevler ekler. Bu dilleri kullanarak web sitelerinin görünümünü ve kullanıcı deneyimini geliştirebilirsiniz.

Front-end geliştiriciler aynı zamanda farklı editörler ve entegre geliştirme ortamları (IDE’ler) kullanır. Örneğin, Visual Studio Code, Sublime Text, Atom, WebStorm gibi editörler, kod yazımını kolaylaştıran özelliklere sahiptir ve web geliştirme sürecini destekler. Ayrıca, tarayıcıların geliştirici araçları da web sayfalarını test etmek ve hata ayıklamak için önemli bir araçtır.

Front-end geliştiricilerin yabancı dil bilgisi de önemlidir çünkü kaynakların çoğu İngilizce olarak mevcuttur ve genel olarak web teknolojilerinde İngilizce terimler kullanılır. İngilizce bilgisi, dokümantasyonları, kaynakları ve toplulukları anlama ve takip etme açısından faydalıdır.

1. HTML

HTML (Hyper Text Markup Language), web sitesinin front-endini oluşturan yazı, görüntü, video gibi verileri sayfaya yerleştirmek için kullanılan bir işaretleme dildir. Amacı, sitenin görünümünü istenen şekilde tasarlamak ve kullanıcıların web sitesindeki içerikle ilgili bir arama yaptığında doğru bir şekilde karşılarına çıkmasını sağlamaktır. Bu amaçla çeşitli komutlar kullanılır. Komutlar büyük (>), küçük (<) işaretleriyle verilir. İçeriği belirlemek için komutların başına ve sonuna bu işaretler yerleştirilir. HTML, terimsel olarak bir programlama dili olarak adlandırılmayabilir, çünkü aslında bu komutlar için tasarlanmış bir işaretleme dili olarak kabul edilir. HTML, bu işaretleme dilinin içine yerleştirilmiş olarak çalıştırılır. HTML standartları, dünya çapında bir sanal ağ birliği olan W3C (World Wide Web Consortium) tarafından oluşturulmuştur. En son sürümü HTML5’tir.

2. CSS

CSS (Cascading Style Sheets), basamaklı stil şablonları olarak da bilinen bir web arayüz geliştirme dilidir ve HTML’ye ek olarak kullanılır. HTML işaretleme diliyle yazılan arayüzü geliştirmek ve komutları sağlamak için kullanılır. Bir metin komutu yazıldığında, metnin nasıl görüneceğini belirlemek için kullanılır. Örneğin, metnin yazı stili, punto boyutu, rengi, içerdiği şablonlar gibi sunum tarzlarını belirlemek için kullanılır. Ayrıca, sayfadaki metinlerin dışında var olan içeriğin görsel tasarımları için de kullanılır ve renkler, biçimler arasındaki uyumu sağlar. Her bir yazı tipi, şablon ve görsel rengi için ayrı ayrı çalışma yapmak yerine, hepsini tek bir sayfada toplayarak bir kez komut üretmeyi sağlar.

CSS komutları, HTML’ye ek olarak kullanılabileceği gibi bağımsız kodlar olarak da yazılabilir. “body” veya “head” gibi bölüm şeklinde yazılan kod biçimleri içerir. Bu bölümler, kodun tek bir kez yazılmasını ve farklı web sayfalarında kullanılmasını sağlar. Kodlar tek bir sayfada saklanır ve bu sayfa, her web sitesi için yazılan HTML kodlarında kullanılabilir. Böylece, her HTML için ayrı ayrı CSS kodu oluşturma ihtiyacı ortadan kalkar. Ayrıca, HTML uzantılarının farklı tarayıcılarda uyumlu hale getirilmesinde de kullanılır. Örneğin, bir anahtar kelimeyi arama motoruna yazdığınızda, bunun web sitesinde yer alıp almadığını test etmek için kullanılır. Bu testi yapabilmek için kullanılan kodlar toplamı CSS’de yazılır.

3. JAVASCRIPT

JavaScript, web arayüzü geliştirme sürecinde sıkça kullanılan bir programlama aracıdır. Web tarayıcısıyla istemci arasındaki bağlantıyı sağlayan betik çalıştırıcılar aracılığıyla web sitesinin içeriğini kullanıcıya sunma görevini üstlenir. Ayrıca kullanıcının tercih ettiği tarayıcıyla aradığı anahtar kelimenin sunucusunu birbirine bağlama, web sayfasında kullanılan içeriklerin düzenlenmesi ve değiştirilmesi gibi işlevleri de yerine getirir. Sunucu ve kullanıcı arasında senkronizasyon sorunları olduğunda devreye girerek sunucuyla iletişim kurar. JavaScript’in yazılımı, “C Programlama” sistemi ve “Self” ve “Scheme” adlı programlardan ilham alınarak gerçekleştirilmiştir. Bu kapsamlı görevleri sayesinde web arayüzü geliştiricileri tarafından sıkça kullanılan bir programlama dili haline gelmiştir. Web sitelerinde sayfaların sürekli olarak geliştirilmesini sağlamak için HTML kodlarına serpiştirilmiş olarak kullanılır.