Yazılım, ilk başladığınızda içinde kaybolduğunuz karmaşık bir labirente benzer. Önemli olan ise bazı süreç ve aşamalardan geçerek kendinizi hangi alana ait olduğunu bulabilmektir.
Ben bu yazımda sizlere kullanıcıların gördüğü önyüz kısmını oluşturan front-end kısmı ile ilgili bir yol haritası oluşturacağım.
Front-End, Back-End ve Full-Stack Geliştirici Olmak Ne Demek?
Front-end, kullanıcının görebildiği bütün bileşenler, sayfa tasarımları, başka adreslere yönlendirebilen butonlar, sayfa içerisindeki animasyonlar, yazı stilleri gibi birçok örnek verebileceğimiz bir alandır.
Back-end kısmı ise, front-end tarafından gönderilen istekleri karşılayan kısımdır. Veri tabanlarına, komut dosyası oluşturmaya, web sitesi mimarisine odaklanır. Bir web sitesinde herhangi bir işlem gerçekleştirirken, gerçekleşen sahne arkası etkinlikleri içerir. Bir hesap girişi olabilir veya bir çevrimiçi mağazadan satın alma olabilir. Back-end geliştiriciler tarafından yazılan kod, tarayıcıların veri tabanı bilgileriyle iletişim kurmasına yardımcı olur.
Full-stack ise, back-end ve front-end’in ikisinin de yapıldığı alandır.
Web Geliştirme Temelleri
Bir front-end olmak için ilk adım web’in temellerini, bir sunucunun ne olduğunu, farklı uygulamaların birbirleriyle nasıl iletişim kuracağını anlamaktır. Ağları, istemcileri, sunucuları ve veri tabanlarını öğrendikten sonra, web geliştirmenin asıl temeline, yani kodlamaya geçebilirsiniz.
İstemci tarafı kaynak kodu oluşturmak için kullanılan kodlama dilleri HTML, CSS, Sass, LeSS, JavaScript ve TypeScript’ten oluşur.
· HTML : HyperText Markup Language , her web sitesinin temelidir. Web sayfalarını bir web tarayıcısında görüntülemek için kullanılan standart biçimlendirme dilidir. HTML’yi öğrenmesi ve kullanması kolaydır. HTML kullanarak temel bir web sitesi oluşturabilirsiniz. HTML, daha sonra tarayıcı tarafından yürütülen sayfa içeriğini tanımlayan koddur. Web sayfasına metin, resim, video, ses, form, düzen ve çok daha fazlasını eklemek için HTML kullanabilirsiniz.
· CSS : Cascading Style Scripts veya CSS, HTML için bir stil oluşturma dilidir. HTML, tarayıcıyı içerik hakkında bilgilendirirken, CSS bu içeriği biçimlendirmenin yolunu açıklar. Karşılaşacağınız CSS’nin temellerinden bazıları, CSS konumlandırma, grid, box model, esnek kutu ve responsive tasarımdır.
· Sass : Syntactically Awesome Style Sheets , CSS’ye derlenmiş bir önişlemci stil sayfası dilidir. Sass, CSS’nin bir uzantısıdır ve tüm sürümleriyle uyumludur. Sass, karışımlar, işlevler, değişkenler, iç içe kurallar, kısmi öğeler, modüller vb. gibi CSS’de bulunmayan özellikler sunar. Tasarımın projeler arasında paylaşılmasını kolaylaştırırken büyük stil sayfalarının düzenlenmesine yardımcı olur.
· LeSS: Leaner Style Sheets , CSS’de derlenmiş, ön işlemci ile geriye dönük uyumlu bir dildir. Sass’tan etkilenir ve yeniden kullanılabilir, yönetilebilir ve özelleştirilebilir stil sayfalarını kolaylaştırır. LeSS, CSS’ye benziyor, bu yüzden öğrenmek daha kolay olacaktır.
· JavaScript: JavaScript veya JS, ağ merkezli uygulamalar için geliştirilmiş hafif ve işlenmiş bir programlama ve komut dosyası dilidir. Hem front-end hem de back-end geliştirmede kullanılır. Çekici, hızlı ve dinamik web siteleri oluşturmaya yardımcı olur. JS’yi kullanırken etkileşimli animasyonlar ve haritalar gibi öğeleri uygulayabilirsiniz. Javascript’in öğrenmeniz gereken birkaç temel bilgisi, DOM manipulation, the concept of closure, scope, async-await, hoisting, shadow DOM, event bubbling & prototype API’leri getirmedir.
· TypeScript: TypeScript , JavaScript’in bir üst kümesi olan açık kaynaklı bir programlama dilidir. Tamamen nesne yönelimlidir ve isteğe bağlı statik yazma, arabirimler ve daha sonra yürütülmek üzere JavaScript’te derlenen sınıflar sunar. TypeScript, IDE’lerin kod yazarken yaygın hataları belirlemek için daha zengin bir ortam sağlamasına olanak tanır.
“Web değişmeye devam ediyor ve teknolojilerdeki gelişmelerle birlikte yeni yöntemler ve araçlar geliyor. Bu nedenle, kendinizi en son trendler ve teknolojilerle güncel tutmanız ve öğrenmeyi asla bırakmamanız çok önemlidir.”
