Front-End

Front-End Developer Yol Haritası

1- Bir Web Uygulamasının Nasıl Çalıştığını Anlamak

Öncelikle her yazılım bölümünde olduğu gibi burada da algoritma nedir ne değildir bunu öğrenmemiz gerekiyor. Algoritmayı öğrendikten sonra size gereksiz gelebilir fakat web sitesi nasıl çalışıyor, neler olup bitiyor bunları inceleyip araştırmalısınız. Her ne kadar diğer bölümlere göre kolay gözükse de bir front-end developer olmak yıllarınızı alacaktır ve kesinlikle kolay değildir.

2- HTML & CSS Öğrenme

Front-end developer‘ların en çok kullandığı iki temel işaretleme dilidir HTML ve CSS. Bu iki dil her ne kadar birbirinden bağımsız olsalarda bir web sitesi için olmazsa olmazdır. Kaba bir tabir ile anlatmak gerekir ise HTML web sitenin iskeleti ise CSS bu web sitesinin dış görünüşüdür. Bir sonraki adımlara geçmeden bu alanda kendinizi iyice geliştirmenizi tavsiye ediyorum. Bu adımla front-end developer olmaya 1 adım daha yaklaşacaksınız.

Front-End

3- Javascript ve Jquery Öğrenmelisiniz

Bu adımımızın asıl amacı Javascript ile birlikle özellikle Jquery kullanarak işlevsellik ve dinamiklik içeren web siteleri oluşturabilirsiniz. Javascript, bir web sitesinde işlevsellik, otomasyon, dinamik içerik ve daha fazlasını eklemek için kullanılan bir programlama dilidir. Javascript, HTML ve CSS’in yapamadıklarını yapar.

4- Uygulama ve Deneyler Yaparak Kendinizi Test Edin

HTML, CSS ve Javascript / Jquery hakkında yeterli bilgi ve birikime sahip oldunuz, fakat yeterli bilgi ve birikimi eğer siz bir pratiğe dökmezseniz bir gelişme, yol katedemeyeceksinizdir. Benim önerim giriş seviyesinde tüm bu dilleri kullanarak kişisel bir web sitesi oluşturabilirsiniz. Kendi web sitenizi oluştururken yardımcı olabilecek bazı frameworkleri ve araçları kullanacaksınız. Bunları kullanmak web geliştirme sürecinize hız katacaktır.

Front-End

5- CSS Framework Öğrenmelisiniz (Bootstrap)

Basitçe anlatmak gerekir ise CSS Frameworkleri projelerinizde kullanabileceğiniz bir dizi CSS kodlarıdır. Sitenize CSS Frameworkleri ekleyerek kendi CSS kodlarınızı yazmasanız bile sitenizin güzel ve düzenli görünmesini sağlamaktadır.

6- CSS Pre-Processor Kullanma (SASS ve LESS)

SASS (Syntactically Awesome Style Sheets) Ruby dilini kullanan, web sayfası tasarlarken CSS’in içerisinde bulunmayan özellikleri kullanmamıza müdahil veren bir CSS derleyicisidir. İçerisinde birisi SASS, diğeri ise SCSS olmak üzere iki adet sentaks barındırır. İkisinin arasındaki hemen hemen tek fark söz dizimleridir.

LESS, yine Ruby ile geliştirilmiş bir CSS derleyicisidir. Özellikleri SASS ile aynı olmakta birlikte, temel fark sentaksıdır. Ancak LESS’in SASS’e göre en temel artısı, kurulum ve kullanımının yalınlığı. SASS’ın kurulumunda yüklemeler yapmanız gerekirken LESS için yalnızca bir kod çağırmanız yeterli oluyor. Her iki derleyici de CSS yazımınızı büyük ölçüde kolaylaştıracak, proje üretim hızını arttıracaktır.

7- React Öğrenin

Kullanıcı Arayüzleri oluşturmak için kullanılan en popüler Javascript kütüphanelerinden biridir. Etkileşimli kullanıcı arayüzleri oluşturmanızı kolaylaştırır.

Front-End

8- Sürüm Takip Sistemi Kullanma

Programcılar için bir mihenk taşı öneminde olan sürüm takip/kontrol sistemleri, büyük çaplı projelerde çalışan programcıların senkronizasyonu için oldukça önemlidir. Kodlamada yapacağınız değişiklikler, birden fazla yazılımcının çalışması, otomatik versiyon kaydı alma gibi özellikleri sayesinde projeler için olmazsa olmazdır. Sürüm takip sistemi olarak şahsen ben Git kullanmanızı öneririm. Her developer için vazgeçilmez bir araçtır.

0.8 Git

Git, kısa süre içerisinde yazılımcıların vazgeçilmezleri arasına giren bir sürüm/versiyon kontrol sistemidir. Yazdığımız projeleri internet üzerinde tutmamızı ve yönetmemizi sağlayan bir platformdur.

Projenizi bilgisayar, harici disk veya bir bulut sisteminde tutuyorsanız başına bir şeyler gelmesi ihtimaline karşı her an yedekleme almanız gerekmektedir. Git, programcıları bu zahmetten kurtararak projenizin istediğiniz zaman, istediğiniz haline ulaşabilmenize olanak veriyor.

9- Paket Yönetim Sistemleri

Paket yöneticileri, projelere dahil edilen CSS ve JavaScript kütüphanelerinin daha kolay yönetilmesini sağlayan sistemlerdir. Kütüphanelerin kurulum, güncelleme, konfigürasyon ve kaldırılma işlemlerinin stabil bir şekilde yürütülmesini sağlarlar.

Bower, Gulp, Grunt, Npm ve Webpack olmak üzere beş büyük paket yönetim sistemi bulunmaktadır.

“Front-end Developer Yol Haritası” başlıklı rehberimizin sonuna geldik. Başka yazılarda görüşmek üzere. Bizleri Instagram ve Twitter hesaplarımız üzerinden takip edebilirsiniz. Diğer içeriklerimize de göz atmayı unutmayın!


Samet Avşar
Selamlar, ben Samet. Aktif olarak üniversite öğrenciyim. Bunun yanında bir front-end developer olma yolunda ilerliyorum, web siteleri yapıyorum. Aynı zamanda Bir Parça Tuhaftık sayfasında yazarlık yapıyorum.